title: React: custom function parameters
body: <p>Given a basic component and a custom handleChange() function, where is the parameter of 'id' coming from in App.js?
  I know that all event functions receive an event property as an argument, but where did 'id' come from? 
  Does this mean that all custom functions I write in a given class based component will receive a parameter besides the event parameter?</p>
  
  <p><strong>App.js Component</strong></p>
  
  <pre><code>import React from "react"
  import TodoItem from "./TodoItem"
  import todosData from "./todosData"
  
  class App extends React.Component {
      constructor() {
          super()
          this.state = {
              todos: todosData
          }
          this.handleChange = this.handleChange.bind(this)
      }
  
      handleChange(id) {
  
          console.log("Changed", id)
      }
  
      render() {
          const todoItems = this.state.todos.map(item =&gt; 
            &lt;TodoItem 
              key={item.id} 
              item={item} 
              handleChange={this.handleChange}
            /&gt;)
  
          return (
              &lt;div className="todo-list"&gt;
                  {todoItems}
              &lt;/div&gt;
          )    
      }
  }
  </code></pre>
  
  <p><strong>TodoItem.js Component</strong></p>
  
  <pre><code>import React from "react"
  
  function TodoItem(props) {
      return (
          &lt;div className="todo-item"&gt;
              &lt;input 
                  type="checkbox" 
                  checked={props.item.completed} 
                  onChange={() =&gt; props.handleChange(props.item.id)}
              /&gt;
              &lt;p&gt;{props.item.text}&lt;/p&gt;
          &lt;/div&gt;
      )
  }
  
  export default TodoItem
  </code></pre>
  
  <p><strong>todosData.js</strong></p>
  
  <pre><code>const todosData = [
      {
          id: 1,
          text: "Take out the trash",
          completed: true
      },
      {
          id: 2,
          text: "Grocery shopping",
          completed: false
      },
      {
          id: 3,
          text: "Clean gecko tank",
          completed: false
      },
      {
          id: 4,
          text: "Mow lawn",
          completed: true
      },
      {
          id: 5,
          text: "Catch up on Arrested Development",
          completed: false
      }
  ]
  
  export default todosData
  </code></pre>