title: Unable to render a child component inside main Component using iteration
body: <p>I have a main component defined as App.js</p>
  <pre><code>import &quot;./styles.css&quot;;
  import { Component } from &quot;react&quot;;
  
  import Item from &quot;./components/Item&quot;;
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = { textInput: &quot;&quot;, items: [] };
    }
    insertItem() {
      if (this.state.textInput !== &quot;&quot;) {
        this.setState((state) =&gt; {
          const list = state.items.push(state.textInput);
          return {
            items: list,
            textInput: &quot;&quot;
          };
        });
      }
    }
    deleteItem(index) {
      this.setState((state) =&gt; {
        const list = [...state.items];
        list.splice(index, 1);
        return {
          items: list,
          textInput: &quot;&quot;
        };
      });
    }
    handleChange(event) {
      this.setState({ textInput: event.target.value });
    }
    render() {
      const template = (
        &lt;div&gt;
          &lt;div&gt;
            &lt;input
              type=&quot;text&quot;
              value={this.state.textInput}
              onChange={(e) =&gt; this.handleChange(e)}
            /&gt;
            &lt;button onClick={this.insertItem.bind(this)}&gt;Add&lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;
            {this.state.items.map((item, idx) =&gt; {
              return &lt;Item name={item} removeItem={this.deleteItem.bind(this, idx)} /&gt;;
            })}
          &lt;/div&gt;
        &lt;/div&gt;
      );
      return template;
    }
  }
  export default App;
  </code></pre>
  <p>and a child Component defined in Item.js</p>
  <pre><code>import { Component } from &quot;react&quot;;
  class Item extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;span&gt;{this.props.name}&lt;/span&gt;
          &lt;span onClick={this.props.removeItem}&gt;X&lt;/span&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Item;
  </code></pre>
  <p>Now my UI looks like<a href="https://i.stack.imgur.com/7DG42.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7DG42.png" alt="enter image description here" /></a></p>
  <p>In the above code(App.js) Iam trying to iterate the items and then display the names using the child component. But due to some reason, on entering the text in the input and clicking add its not showing up. Also there are no errors in the console.</p>
  <p>Please help, thanks in advance</p>
  <p>Edited:</p>
  <p>After the recent changes I get this error
  <a href="https://i.stack.imgur.com/ExTMP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ExTMP.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/JYe2m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JYe2m.png" alt="enter image description here" /></a></p>