How to add new props dynamically to the component using navigator in React Native

Question

In my scenario I am rendering the component using navigator. In that component I perform some action like save the record then I added a new prop dynamically to the existing component. But here the dynamic prop is not visible in that component only previous props only visible. How to achieve adding dynamic prop to the component using navigator.

here I am providing code while using React Native navigator I am calling DisplayCustomSchema component like as below

this.props.navigator.push({
     id: 'DisplayCustomSchema',
     name: 'DisplayCustomSchema',
     org:this.props.org
});

In DisplayCustomSchema component componentDidMount I am calling one ajax post it it return some data.

var DisplayCustomSchema = React.createClass({

         componentDidMount : function(){
             ajaxpost(data){//example only
               this.props.record=data
              //here i am try to move response data to props because I am using this data in saveRecord function but in save record props contain name and org only


       }
      }
      render: function(){
                <View>
                  <TouchableHighlight style={styles.touchButtonBorder} underlayColor="#ffa456" onPress={saveRecord.bind(this,this.props)}>
                    <Text style={styles.button}>SAVE</Text>
                  </TouchableHighlight>
                </View>
      }
})

here my question is why data not moves to props

Answer 1

You have two options

1. Use the state

2. Use a framework like redux

   1. As you can't set props you may use this.setState to set the loaded data

   2. If you use redux, you may dispatch an action on mounting, which then changes the store to include the loaded props.

Note that the second option is strongly encouraged, as using the state is an antipattern.