title: Cant fetch data from child component react
body: <p>So this is my parent component</p>
  <pre><code>class Todo extends React.Component {
    state = {
      task: '',
    }
    clicked = () =&gt; {
      todoArr.push({id: idcount, text: this.state.task, completed: false})
      idcount++
      this.setState({task: ''})
    }
    changeComletedStatus = props =&gt; {
      console.log(props.id)
    }
    render() {
      return (
        &lt;div className=&quot;Todo&quot;&gt;
          {todoArr.map(todo =&gt; &lt;ShowArr text = {todo.text} key = {todo.id} id = {todo.id} completed = {todo.completed} changeComletedStatus = {() =&gt; this.changeComletedStatus}/&gt;)}
          &lt;h1 className = &quot;centered&quot;&gt;ToDo App&lt;/h1&gt;
          &lt;input value = {this.state.task} type=&quot;text&quot; placeholder = &quot;...&quot; onChange = {(e) =&gt; this.setState({task: e.target.value})}/&gt;
          &lt;button onClick = {this.clicked}&gt;Add&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Todo
  </code></pre>
  <p>and my child component</p>
  <pre><code>import React from 'react'
  
  const ShowArr = (props) =&gt; {
      let id = props.id
      console.log(props.id)
      return (
          &lt;div className=&quot;showArr&quot;&gt;
              &lt;p className=&quot;singleTask&quot;&gt;
                  {props.text}    
              &lt;/p&gt;
              &lt;button onClick = {props.changeComletedStatus(id)}&gt;X&lt;/button&gt;
          &lt;/div&gt;
      )
  }
  
  export default ShowArr
  
  </code></pre>
  <p>The problem is changeCompleteStatus. My console.log prints <code>undefined</code>. Can you explain to me why it doesn't print id I need and how to fix this problem.</p>