Pass value between components

Question

Trying to make a todo list, which allows user and click add to add item, but failed miserably.

https://jsfiddle.net/nc84n7px/2

I'm lost how to pass data from TodoInput to Todo_list via props.

    var TodoInput = React.createClass({
  render() {
    return (
    <div>
     <input type="text" />
     <button onClick={this.props.addItem}>Add</button>
     </div>
    );
  }
});

var Todo_list = React.createClass({
  getInitialState(){
    return { items:[]}
  },
  addItem(items){
  this.setState(this.state.items.push(item))
  },
  render() {
    return (
    <div>
     <li>{this.state.items}</li>
     </div>
    );
  }
});

ReactDOM.render(
  <div>
  <TodoInput />
  <Todo_list />
  </div>,
  document.getElementById('container')
);

Answer 1

Your can't pass value between two 'sibling' components as presented in your code:

ReactDOM.render(
  <div>
    <TodoInput />
    <Todo_list />
  </div>,
  document.getElementById('container')
);

But you can achieve this in two ways:

1st Option : including <TodoInput /> in the the render() method of the <Todo_list /> . Here is an example of how you can approach this: https://jsfiddle.net/petebere/0wqLhaqu/

2nd Option : rendering <TodoInput /> and <Todo_list /> inside a parent component. The parent component would be responsible for maintaining state and passing values between <TodoInput /> and <Todo_list /> .

Option 1 code:

var TodoInput = React.createClass({
  getInitialState() {
    return {
        userInput: ''
    };
  },

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

  handleSubmit(event) {
    event.preventDefault();
    this.props.addItem(this.state.userInput);
    this.setState({
        userInput: ''
    });
  },

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text"
                     onChange={this.handleChange}
                     value={this.state.userInput} />
        <input type="submit" />
      </form>
    );
  }
});

var Todo_list = React.createClass({
  getInitialState() {
    return {
        items: []
    };
  },

  addItem(item) {
    this.setState({
        items: this.state.items.concat(item)
    });
  },

  render() {
    const renderTodos = this.state.items.map((item, index) => {
        return <li key={index}>{item}</li>;
    });

    return (
      <div>
         <TodoInput addItem={this.addItem} />
         {renderTodos}
      </div>
    );
  }
});

ReactDOM.render(
  <Todo_list  />,
  document.getElementById('container')
);

Answer 2

There is probably cleaned way to do this, but you can do something like this

var Todo_list = React.createClass({

  render() {
    return (
    <div>
       {this.props.items.map (i => <div>{i}</div>)}
     </div>
    );
  }
});

var TodoInput = React.createClass({
  getInitialState(){
    return { 
       inputValue: "",
       items: []
    }
  },

  addItem: function(){
    this.setState({ 
        items: this.state.items.concat([this.state.inputValue])
    })

  },

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

  render() {
    return (
        <div>
           <input type="text" onChange={this.onChange}/>
           <button onClick={this.addItem}>Add</button>
           <Todo_list items={this.state.items} />
        </div>
    );
  }
});



ReactDOM.render(<TodoInput />, document.getElementById('container')
);

Here is jsfiddle