CODEWITHSUNDEEP
javascriptarraysreact-native
mliki melek
mliki melek

Reputation: 29

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

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.

enter image description here

<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>

Upvotes: 1

Views: 1483

Answers (1)

Sarmad Shah
Sarmad Shah

Reputation: 3805

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

Upvotes: 2

Related Questions