Re-render only on button press in react-native -

i have react native screen 2 text inputs added default, while 2 text inputs added on button press only.

i able add text first 2 text inputs, other 2 not accepting text, accept text when "add car" button pressed again.

what missing? why view not re-rendered when add text.

carreg.js

'use strict'; import react, { component } 'react'; import {   stylesheet,   text,   view,   textinput } 'react-native'; var button = require('./button'); var parse = require('parse/react-native');  class carreg extends component {    constructor(props) {   super(props);   this.state = {   carnumber1: "",   carstate1: "",   carnumber2: "",   carstate2: "",   errormessage: "",   carentry: <view/>, };   }  render() { const { page } = this.state; return (   <view style={styles.container}>     <text       style={[styles.titlecontainer, {marginbottom: 30}]}>       please register cars, can add up-to 2 cars </text>     <text style={styles.titlecontainer}> license plate number: </text>     <textinput       style={styles.textinputcontainer}       onchangetext={(text) => this.setstate({carnumber1: text})}       value={this.state.carnumber1}/>     <text style={styles.titlecontainer}> state: </text>     <textinput       style={styles.textinputcontainer}       onchangetext={(text) => this.setstate({carstate1: text})}       value={this.state.carstate1}/>     {this.state.carentry}     <text>{this.state.errormessage}</text>     <button text="add car" onpress={this.onaddcarpress.bind(this)}/>     <button text="submit" onpress={this.onsubmitpress.bind(this)}/>     <button text="i don't have car" onpress={this.onnocarpress.bind(this)}/>   </view> );   }   onaddcarpress() { this.setstate({carentry:   <view style={styles.addcarview}>       <text style={styles.titlecontainer}> license plate number: </text>       <textinput         style={styles.textinputcontainer}         onchangetext={(text) => this.setstate({carnumber2: text})}         value={this.state.carnumber2}/>       <text style={styles.titlecontainer}> state: </text>       <textinput         style={styles.textinputcontainer}         onchangetext={(text) => this.setstate({carstate2: text})}         value={this.state.carstate2}/>   </view>   })   }   onsubmitpress() {    this.props.navigator.push({name: 'main'});   }   onnocarpress() {    this.props.navigator.push({name: 'main'});  }  }   const styles = stylesheet.create({  container: {  flex: 1,  justifycontent: 'center',  alignitems: 'center',  backgroundcolor: '#f5fcff',  },  addcarview: {  backgroundcolor: '#f5fcff',  justifycontent: 'center',  alignitems: 'center',  },  titlecontainer: {  fontsize: 20,  fontfamily: 'helvetica',  },  textinputcontainer: {  padding: 4,  margin: 5,  borderwidth: 1,  borderradius: 10,  width: 200,  height: 40,  fontfamily: 'helvetica',  alignself: 'center',  marginbottom: 10,  margintop: 10,  },  });   module.exports = carreg; 

button.js

'use strict'; import react, { component } 'react'; import {   stylesheet,   text,   touchablehighlight, } 'react-native';  class button extends component {    constructor(props) {   super(props); }  render() {   return (     <touchablehighlight       style={styles.container}       onpress={this.props.onpress}       underlaycolor ='gray'>       <text style={styles.textcontainer}>{this.props.text}</text>     </touchablehighlight>  );  }  }   const styles = stylesheet.create({    container: {    justifycontent: 'center',    alignitems: 'center',    backgroundcolor: '#f5fcff',     margintop: 10,     padding: 5,     borderwidth: 1,     borderradius: 10,   },   textcontainer: {     fontfamily: 'helvetica',     justifycontent: 'center',     alignself: 'center',     textalign: 'center',     flex:1,     fontsize: 20,   } });  module.exports = button; 

i created demo of code on rnplay. (only ios version.) think it's not idea push html state. state data array, boolean , templates (strings). opinion, of course.

after click submit button, @ console.