title: How can we access object which is not defined?
body: <p>I am trying to create a simple Todo List in ReactJS, while the code is working, I'm having trouble understanding a few pieces of code.</p>
  
  <p>My Application consists of 3 components namely:</p>
  
  <ol>
  <li>index.js - The entry point for the application.</li>
  <li>TodoList.js - Rendering the forms, button and TodoItem.js component</li>
  <li>TodoItem.js - Actual list which maps over the input text and displays the list.</li>
  </ol>
  
  <p>My TodoList.js component:</p>
  
  <pre><code>import React, { Component } from "react";
  import TodoItems from "./TodoItems";
  
  class TodoList extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        items: []
      };
  
      this.addItem = this.addItem.bind(this);
    }
  
    addItem(e) {
      if (this._inputElement.value !== "") {
        var newItem = {
          text: this._inputElement.value,
          key: Date.now()
        };
  
        this.setState(prevState =&gt; {
          return {
            items: prevState.items.concat(newItem)
          };
        });
      }
      //console.log(this._inputElement.value);
      this._inputElement.value = "";
      e.preventDefault();
    }
    render() {
      return (
        &lt;div className="todoListMain"&gt;
          &lt;div className="header"&gt;
            &lt;form onSubmit={this.addItem}&gt;
              &lt;input
                ref={a =&gt; (this._inputElement = a)}
                placeholder="enter task"
              &gt;&lt;/input&gt;
              &lt;button type="submit"&gt;add&lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;TodoItems entries={this.state.items} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default TodoList;
  </code></pre>
  
  <p>The TodoItems.js component:</p>
  
  <pre><code>import React, { Component } from "react";
  
  class TodoItems extends Component {
    createTasks(itemmm) {
      return &lt;li key={itemmm.key}&gt;{itemmm.text}&lt;/li&gt;;
    }
  
    render() {
      var todoEntries = this.props.entries;
      var listItems = this.props.entries.map(this.createTasks);
      // console.log(this.props.entries);
      return &lt;ul className="theList"&gt;{listItems}&lt;/ul&gt;;
    }
  }
  
  export default TodoItems;
  
  </code></pre>
  
  <p>What is the problem?
  <strong>1)</strong> I'm having a hard time understanding how <code>return &lt;li key={itemmm.key}&gt;{itemmm.text}&lt;/li&gt;;</code>
     works, as "itemmm" is a random parameter which I have passed, also how "itemmm.text" correctly displays the text, as per my understanding "itemmm" is a vague object and I have not defined it anywhere.</p>
  
  <p><strong>2)</strong> Importance of <code>&lt;TodoItems entries={this.state.items} /&gt;</code> line of code in my "TodoList.js" component. so far I understand it is using props to dynamically enter a value. But how is it tinkering with the TodoItem.js component?</p>
  
  <p>Thank you for reading,sorry if its a too basic question. Any help would be much appreaciated.</p>