how to send value one component to another component in react js?

Question

could you please tell me how to send input field value on second component on button click .I have one button and input field in first component.On button click I need to send input field value to second component

here is my code http://codepen.io/naveennsit/pen/GZbpeV?editors=0010

var { Router, Route,browserHistory } = ReactRouter
class First extends React.Component{
  sendValue(){
    browserHistory.push('/second');
  }
  render(){
    return (<div>
    <input type='text' />
      <button onClick={this.sendValue}>send</button>
    </div>)
  }
}

class Second extends React.Component{
  render(){
    return <div>second component</div>
  }
}
class Main extends React.Component{
  render(){
    return (
     <Router history={browserHistory}>
          <Route path='/' component={First}></Route>  
          <Route path='/second' component={Second}></Route>  
    </Router>)
   }
}
React.render( <Main />,document.getElementById('app'));
browserHistory.push('/')

score 3 · Accepted Answer · answered May 19 '16 at 06:35

The best solution would be to create some architecture that would allow you to have a separate state object, change it, and pass changes on to your components. See Flux, or Redux.

For a pinpointed solution, you could use url params:

class First extends React.Component{
  sendValue(){
    browserHistory.push('/second/' + this.refs.textField.value);
  }

  render(){
    return (
      <div>
        <input type='text' ref='textField' />
        <button onClick={() => {this.sendValue()}}>send</button>
      </div>)
  }
}

class Second extends React.Component { 
  render(){
    return <div>second component: {this.props.params.test}</div>
  }
}

class Main extends React.Component{
  render(){
    return (
     <Router history={browserHistory}>
          <Route path='/' component={First}></Route>  
          <Route path='/second/:test' component={Second}></Route>  
    </Router>)
   }
}

score 3 · Answer 2 · answered May 19 '16 at 07:48

thanks @omerts, by using refs is a best idea and also another way using state and i am also new to react.

var { Router, Route, browserHistory } = ReactRouter
class First extends React.Component{
  constructor(props){
    super(props);
    this.sendValue = this.sendValue.bind(this);    
    this.setValue = this.setValue.bind(this);
    this.state = {
      userID: "@nageshwar_uidev"
    };
  }
  setValue(e){
    this.setState({
      userID: e.target.value
    });
  }
  sendValue(){
    //console.log(this.state.userID);
    browserHistory.push('/second/'+this.state.userID); 
  }
  render(){
    return (
      <div>
        <input type='text' value={this.state.userID} onChange={this.setValue} />
        <button onClick={this.sendValue}>send</button>
      </div>
    )
  }
}

class Second extends React.Component{
  render(){
    let { userID } = this.props.params;
    return <div>The userID from first component is {userID} <a href="#" onClick={()=>browserHistory.push('/')}>back</a></div>
  }
}
class Main extends React.Component{

  render(){
    return (
     <Router history={browserHistory}>
          <Route path='/' component={First}></Route>
          <Route path='/second/:userID' component={Second}></Route>
    </Router>)
   }
}
React.render( <Main />,document.getElementById('app'));
browserHistory.push('/')

working example at codepen

how to send value one component to another component in react js?

2 Answers2