Passing input state around in react

Question

I have a react class that has this code:

  getInitialState: function(){
    return {
      results: false,
      value: ''
    };
  },

  handleClick: function(event) {
    this.setState({ results: true });
    event.preventDefault();
  },

  handleChange: function(event){
    this.setState({value: event.target.value})
  },

    <input type="text" id="playerName" value={this.state.value} onChange={this.handleChange} placeholder="name" />

IN ANOTHER REACT CLASS

I have:

myFunc: function() {
    this.setState({info: true})
    let name = this.props.value;
    console.log(name) --> returns undefined
  },

How can I name to be equal to the name that the user typed in by passing it down from one react class to another

I can post more code but I thought props was the way to pass down code you needed elsewhere. this.state.value also returns undefined

edit:

myFunc called here:

<input type="submit" value="I can play" onClick={() => this.myFunc()}/>

Answer 1

The easiest way for this to work is to have a container component, this container component would handle all state management and wrap around child components:

<WrapperComponent>
 <Input/>
 <Info />
</WrapperComponent

Your input can still have its own state if you want to do debouncing and things like that but the wrapper component will have its own functions that set its own state and it passes those functions down to input so that input can call them with its new values and then the wrapper component will update and then the Info component will receive its value props from the wrapper component and everything will be in sync.

here is an example codepen http://codepen.io/finalfreq/pen/VKPXoN

class Wrapper extends React.Component {    
  constructor() {
  super();
    this.state = {
      value: 'default'
    }
  }

  _handleChange = (value) => {
    this.setState({value: value})  
  };

  render() {
    return (
      <div>
       <Input onChange={this._handleChange} value={this.state.value}/>
       <Info value={this.state.value} />
      </div>
    )
  }
}

class Input extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: props.value
    }
  }

  onChange = (e) => {
    this.setState({value: e.target.value});
    this.props.onChange(e.target.value);
  };

  render() {
    return <input type="text" value={this.state.value} onChange={this.onChange} />
  }
}

const Info = (props) => {
  return (
   <h1> {props.value} </h1>
  )
}


ReactDOM.render(<Wrapper />,document.getElementById('app'));

obviously you can easily convert this to using the createClass version doesn't have to be using es6 version. The main take away here is that if you want to share values across components that aren't directly related then you definitely are going to want a state container component that is handling everything.

Here is a great article going over container vs presentational components https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0