title: ReactJS - cannot read this.props.value on state object
body: <p>I am just starting to learn ReactJS and I have encountered an error upon compilation of my code:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'value' of undefined</p>
  </blockquote>
  
  <p>The error occurs on this line: <code>count: this.props.value</code> on the file <code>counter.jsx</code><br><br>
  As you can see, I have tried to use <code>console.log(this.props)</code> on the render function on <code>counter.jsx</code> in order to validate if the props are set. They are set - so I do not know why I cannot access it in the state object in my Counter class. <br><br>
  Question: What am I doing wrong?</p>
  
  <p><strong>counter.jsx:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Counter extends Component {
      state = {
          count: this.props.value,
          tags: []
      };
  
      render(){
          console.log(this.props);
          return (&lt;React.Fragment&gt;
                      &lt;span&gt;{this.formatCount()}&lt;/span&gt;
                  &lt;/React.Fragment&gt;
          );
      }
  
      formatCount(){
          var { count } = this.state;
          return count === 0 ? &lt;h1&gt;Zero&lt;/h1&gt; : count;
      }
  }
  export default Counter;
  </code></pre>
  
  <p><strong>index.js:</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import 'bootstrap/dist/css/bootstrap.css';
  
  import Counters from './components/counters';
  
  ReactDOM.render(&lt;Counters /&gt;, document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p><strong>counters.jsx:</strong></p>
  
  <pre><code>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;
          );
      }
  }
  
  export default Counters;
  </code></pre>