How to display extra components in view on Button press in react-native? -

this ideal methodology question. new react-native , developing app in asking people enter list of cars own.

when arrive @ app screen, see fields enter 1 car's information.

but when press 'add car' button below above input fields, on same page, should able see 1 more set of fields add information car.

what ideal way this,

i have done following,

• i have 1 set of car information fields displayed default in render function
• after that, have 'add car' touchable highlight
• when touchable highlight clicked, function called returns , new set of fields added (textinput>, etc. )

how add information returned on page? should update state variable "" @ start , contain "textinput etc." later?

this sounds ideal use case map:

updatecar (index, name) {   let cars = this.state.cars    // update value   cars[index].name = name    this.setstate({     cars: cars   }) }  addcar () {   let cars = this.state.cars    // add new car   cars.push({ name: '' })    this.setstate({     cars: cars   }) }  render () {   let me =    return (     <view>       {this.state.cars.map(function(car, index) {         return (<textinput onchangetext={(text) => me.updatecar(index, name)}                           value={me.state.cars[index].name} />)       })}       <touchablehighlight onpress={this.addcar}>         <text>add car</text>       </touchablehighlight>     </view>   ) } 

remember use this.addcar.bind(this) in constructor() each method there.

the map() function allows iterate on collection , return value each item in collection. here can take raw car data, , return ui elements.