title: Trying to make a to-do-list using react
body: <p><img src="https://i.stack.imgur.com/cGfE0.jpg" alt=""></p>
  
  <p>After adding the item into the input, when clicking the button to add the items on the list, its only creating the li element and the user input is not there.</p>
  
  <pre><code>constructor() {
      super();
  
      this.state = {
        userInput: "",
        list: []
      };
    }
  
    changeUserInput = Input =&gt; {
      this.setState({ userInput: Input.target.value });
    };
    onButtonSubmit = Input =&gt; {
      let listArray = this.state.list;
      listArray.push(Input);
      this.setState({ list: listArray });
    };
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Input
            changeUserInput={this.changeUserInput}
            onButtonSubmit={this.onButtonSubmit}
          /&gt;
          &lt;ul&gt;
            {this.state.list.map((val, index) =&gt; (
              &lt;li key={index}&gt;{val}&lt;/li&gt;
            ))}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  
  //Input.js
  
  const Input = ({ changeUserInput, onButtonSubmit }) =&gt; {
    return (
      &lt;div&gt;
        &lt;p className="f2"&gt;{"Make a shopping list by adding items"}&lt;/p&gt;
        &lt;div&gt;
          &lt;input
            className="w-70 ma2 pa2 br-pill"
            type="text"
            placeholder="enter items"
            onChange={changeUserInput}
          /&gt;
          &lt;div&gt;
            &lt;button
              className="f6 grow br-pill ba bw1 ph3 pv2 mb2 dib black
      pointer"
              onClick={() =&gt; {
                onButtonSubmit();
              }}
            &gt;
              Add Item
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <ol>
  <li><p>List item</p>
  
  <p>expected the output like
  .Item
  but the out put is only
  .</p></li>
  </ol>