title: Error When passing data between components
body: <p>I am trying to pass a value from one component - Counters.jsx to Counter.jsx. When I go to the developer console and I do a log, I can get the data from: this.props.value but when I try to set this into the state, I get the following error: TypeError: Cannot read property 'value' of undefined. </p>
  
  <pre><code>// This is the component: Counters
  
  import React, { Component } from "react";
  import Counter from "./counter";
  
  class Counters extends Component {
    state = {
      counters: [
    { id: 1, value: 4 },
    { id: 2, value: 0 },
    { id: 3, value: 0 },
    { id: 4, value: 0 }
    ]
  };
  
  render() {
  return (
    &lt;div&gt;
      {this.state.counters.map(counter =&gt; (
        &lt;Counter key={counter.id} value={counter.value} selected={true} /&gt;
      ))}
    &lt;/div&gt;
  );
  }
  }
  
  
  
  // This is the component: Counter
  
  import React, { Component } from "react";
  
  class Counter extends Component {
    state = {
      count: this.props.value
    };
  </code></pre>
  
  <p>The issue is in the class Counter when I set the state - Count to this.props.value. However this value is accessible if I do console.log(this.props.value). </p>
  
  <p>I am getting this error: Uncaught TypeError: Cannot read property 'value' of undefined</p>
  
  <p>Does anyone know if I missed out something and why is it that I can access it with console.log but cannot set the state count to this.props.value?</p>