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()}/>

You need to bind this in handleChange method explicitly like this this.handleChange.bind(this). Try this and yes post more code if it still doesn't work, may be try Codepen to put your whole code on it. — Basim Hennawi
– Basim Hennawi, Commented Nov 10, 2016 at 17:14
@BasimHennawi No, not with createClass. That would be a problem if the OP was using react components with class. — Davin Tryon
– Davin Tryon, Commented Nov 10, 2016 at 17:17
How does this.props.value get set? Can you show the component that uses myFunc? — Davin Tryon
– Davin Tryon, Commented Nov 10, 2016 at 17:18
@DavinTryon added one more line to show where I call myFunc, anything else you want to see? — The worm
– The worm, Commented Nov 10, 2016 at 17:24

finalfreq · Accepted Answer · 2016-11-10 17:27:01Z

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

answered Nov 10, 2016 at 17:27

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

The worm Over a year ago

I think I get this. but the problem is this setting the value on screen as soon as i type it out. i.e on code pen when I edited the text box it showed it underneath. I want something more like, the user enters a number a value into the text box, they hit submit and then I can call that submitted value other places in the code..

The worm Over a year ago

does that make sense??

finalfreq Over a year ago

You would just update the input component to have a button and instead of passing in a onChange function as props do an onSubmit function. The idea would still be the same that you would have the WrapperComponent be updated once the submit takes place. If you want it outside of the WrapperComponent you would need to use something like Redux which provides stores components can subscribe to

finalfreq Over a year ago

I updated the pen form to use submit button codepen.io/finalfreq/pen/VKPXoN

Collectives™ on Stack Overflow

Passing input state around in react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related