title: Is this how to create a bullet point array in react
body: <p>I'm trying to understand the best way to input each item in an array as an li element  </p>
  
  <p>I'm confused because it seems like there is a better way, or that may implementation isn't right despite it working when I run the code.</p>
  
  <pre class="lang-js prettyprint-override"><code>class App extends Component {
    constructor(props){
      super(props);
      this.state = {
  
          inputValue: '',
          inputValue2: '',
          todo: [], 
      }
    }
  
    handleInputChange(e) {
      this.setState({inputValue: e.target.value})
    }
  
    mapList() {
      return this.state.todo.map(x =&gt; &lt;li&gt;{x}&lt;/li&gt;);
    }
  
    handleAddToDo = () =&gt; {
      this.setState({
        todo: [...this.state.todo, this.state.inputValue ]
      })
      console.log(this.state.todo);
      this.setState({inputValue: ''})
      this.mapList();
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;br /&gt;
          &lt;input type="text"
              value={this.state.inputValue}
              onChange={(e)=&gt; this.handleInputChange(e)}
          /&gt;
          &lt;button onClick={()=&gt; this.handleAddToDo()}&gt;
            Add to To-Do list
          &lt;/button&gt;
          &lt;ol&gt;
            {this.mapList()}
          &lt;/ol&gt;
  
        &lt;/div&gt;
      )
    }
  }
  </code></pre>