title: Update a component from another component
body: <p>I'm new to React and I'm wondering if one can update the content of another component based on the events from another component.</p>
  <p>I have a two react components. One of the components gets its data loaded to it when the page loads and the other component should have its data rendered based on the first components <code>onClick</code> method.</p>
  <p>One of the components gets its data loaded to it from an API, that I then show in a list. I then have a method that should handle the clicked items called <code>itemClicked</code>, when an item gets clicked the data in the other component should update.</p>
  <pre><code>itemClicked = () =&gt; {
    // Get the ID of the clicked item, and use it in the other component
    console.log(e.target.attributes[0].value);
  }
  
  // ...
  
  &lt;ul&gt;
      {items.map(item =&gt; (
          &lt;li onClick={this.itemClicked} key={item._id} itemID={item._id}&gt; {item.name} &lt;/li&gt;
      ))}
  &lt;/ul&gt;
  </code></pre>
  <p>I now this might be a bad question to ask, but I'm new to React and trying to learn a bit more about states and props.</p>
  <p>Edit.</p>
  <p>This is the parent component where I load the two components:</p>
  <pre><code>class Dashboard extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              currentItem: {}
          }
      }
      
      onItemClick(item) {
            this.setState({
              currentItem: item
          })                                        
      
      }
  
      render() {
          return &lt;&gt;
              &lt;div className='dashboard'&gt;
                  &lt;div className='dashboard__wrapper'&gt;
                      &lt;SelectItem onItemClick=&quot;{this.onItemClick}&quot; /&gt;
                      &lt;EditItem item=&quot;{this.state.currentItem}&quot; /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/&gt;
      }
  }
  
  export default Dashboard
  </code></pre>
  <p>I updated the SelectItem component as well:</p>
  <pre><code>itemClicked = (e) =&gt; {
      console.log(e.target.attributes[0].value);
  
      if (this.props.onItemClick) {
          this.props.onItemClick(e.target.attributes[0].value)
      }
  }
  </code></pre>
  <p>But now it complains that this line:</p>
  <pre><code>this.props.onItemClick(e.target.attributes[0].value)
  </code></pre>
  <p>Isn't a function:</p>
  <pre><code>Uncaught TypeError: this.props.onItemClick is not a function
  </code></pre>