React Native - how to add form card in a list of card on Button press

Question

I am creating an Add button and cards every one of them contain three inputs. i want on user click a new MultiCityCard added and how to manage their states like the screen shot.

<View style={{}}>
    <MultiCityCard title="Flight 1" />
    <MultiCityCard title="Flignt 2" />
    <Button
      icon={{
        name: 'plus',
        size: 20,
        color: 'white',
        type: 'entypo',
      }}
      title="Add another flight"
      containerStyle={{ padding: 20 }}
    />
  </View>

Hello, you can check this question stackoverflow.com/questions/36651583/… However, you might need to lift up your state — Louis Lecocq
– Louis Lecocq, Commented Mar 4, 2019 at 14:08
@mliki brother can you use FlatList for such a scenario! I think that would be very much fine in a listing scenario! want me to give an example on that one? — Rizwan Atta
– Rizwan Atta, Commented Mar 4, 2019 at 14:33
@Rizwanatta sorry i couldn't understant your idea by using a flatList. can you give an exemple? — mliki melek
– mliki melek, Commented Mar 4, 2019 at 14:52

Sarmad Shah · Accepted Answer · 2019-03-04 16:45:49Z

2

Take your data inside array. For example

data: [
  {
   from: '',
   to: '',
  }
]

and when you click on add, push new element to this array. for example

this.setState({ data: [{ from: '', to: ''},...this.state.data]})

Then you can edit or view the data according to index. For example

data.map((item, index) => <Button onPress={() => {
// here you have access to the index 
} }
/>);

If you want more detailed example, I posted a snack for you https://snack.expo.io/@azaabudeen/Y2FyZW

edited Mar 4, 2019 at 16:45

answered Mar 4, 2019 at 14:08

Sarmad Shah

3,8053 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mliki melek Over a year ago

yeah i get the idea but i will appreciate a detailed example.

Sarmad Shah Over a year ago

Sure. Let me give you an example via snack

Collectives™ on Stack Overflow

React Native - how to add form card in a list of card on Button press

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related