CODEWITHSUNDEEP
javascriptreactjs
Nageshwari p
Nageshwari p

Reputation: 49

How to pass state to one component to another in different files

Hello I am new to ReactJs. I am tring to build simple form.

Once we submit form need to update the content.

Please find code below

MainCOmponent

===============

var React = require('react');
var FormComp = require('FormComp');

var MainComponent = React.createClass({
  getInitialState:function(){
    return(
    this.state = {
      name:'Nageshwari'
    }
  )
},

render:function(){
return(
  <div>
      <h2>Hello {this.state.name} !!!</h2>
      <FormComp/>

  </div>
)
}
});


module.exports = MainComponent;

FormComponent

var React = require('react');

var FormComp = React.createClass({
   onButtonSubmit:function(e){
      e.preventDefault();
      var name = this.refs.name.value;
      if(name.length > 0){
         this.refs.name.value = '';
         return;
      }

   },
  render:function(){
    return(
       <form onSubmit={this.onButtonSubmit}>
         <input type="text" ref="name"/>
         <button>Set Name</button>
       </form>
     );
  }
})

module.exports = FormComp;

I am always getting Initial state only . its not updating name after submiting form.

Thanks.

Upvotes: 1

Views: 1562

Answers (2)

Rizal Sidik
Rizal Sidik

Reputation: 989

maybe you can add function in main component, the function it looks like this : 

changeName:function(value){
   return(
        this.setState({
                name: value
        }))
},

and passing into FormComp component like this :

<FormComp changeName={this.changeName} />

and trigger in your component FormComp :

if(name.length > 0){
  this.refs.name.value = '';
  this.props.changeName(name); //this one
  return;
}

this is the full code :

MainComponent : 

var React = require('react');
var FormComp = require('FormComp');

var MainComponent = React.createClass({
  getInitialState:function(){
    return(
    this.state = {
      name:'Nageshwari'
    }
  )
},

changeName:function(value){
   return(
        this.setState({
                name: value
        }))
},

render:function(){
return(
  <div>
      <h2>Hello {this.state.name} !!!</h2>
      <FormComp changeName={this.changeName} />

  </div>
)
}
});


module.exports = MainComponent;

FormComp :

var React = require('react');

var FormComp = React.createClass({
   onButtonSubmit:function(e){
      e.preventDefault();
      var name = this.refs.name.value;
      if(name.length > 0){
         this.refs.name.value = '';
         this.props.changeName(name);
         return;
      }

   },
  render:function(){
    return(
       <form onSubmit={this.onButtonSubmit}>
         <input type="text" ref="name"/>
         <button>Set Name</button>
       </form>
     );
  }
})

module.exports = FormComp;

Hope it can help you, notice me if you have an error, thanks :)

Upvotes: 0

Simon
Simon

Reputation: 628

You need to add a callback function to your FormComp component.

Then you can execute that callback function within onButtonSubmit and update the state of the parent component.

In your parent component you would have a method like:

onFormSubmit(name) {
    this.setState({
        name,
    });
}

I hope this helps, if not, shoot me a question!

Edit: Explanation is, child components do not magically update the state of the parent component, that's why you need a callback so that the parent component knows about the change!

Upvotes: 1

Related Questions