title: Cannot access to property in object in React
body: <p>I tried to make a onClick event and show information.</p>
  
  <p>When I do console.log to show filteredSreen[0], I got a object(<code>{id: "2", screen: "2", layer: "5", time: "13:15", dimension: "2D"}</code>).</p>
  
  <p>As I waned to access id or screen,I did <code>console.log(filteredSreen[0].id)</code>   or <code>console.log(filteredSreen[0].screen)</code> at line6.</p>
  
  <p>They both make same error <code>Cannot read property 'id' of undefined</code> or  <code>Cannot read property 'screen' of undefined</code></p>
  
  <p>What should I do to access property?</p>
  
  <p>===============================================</p>
  
  <p>screeninfo is array.</p>
  
  <p><code>[{id: "1", screen: "2", layer: "5", time: "13:15", dimension: "2D"},{id: "2", screen: "2", layer: "5", time: "13:15", dimension: "2D"},{id: "3", screen: "2", layer: "5", time: "13:15", dimension: "2D"}]</code></p>
  
  <p>It is saved in reduex store and I passed it to the BookInfo component
  .I figure out that screeninfo is passed rightly using console.log.<br>
  And I also checked the result which is {id: "2", screen: "2", layer: "5", time: "13:15", dimension: "2D",} using console.log.
  But I can't access to propery.<br>
  I made temporatily like this and I got right things.  </p>
  
  <pre><code>// temporary way
  const filterScreen = () =&gt; {
      let filteredSreen = screeninfo.filter((item) =&gt; item.id === screenId);
      let result = filteredSreen[0];
      let screen = "";
      let layer = "";
      for (let key in result) {
        if (key === "screen") {
          screen = result[key];
        }
        if ((key = "layer")) {
          layer = result[key];
        }
      }
      return screen,layer;
    }
  
  </code></pre>
  
  <pre><code>const BookInfo = ({ movie, theater, screenId, date, screeninfo }) =&gt; {
    const filterScreen = () =&gt; {
      let filteredSreen = screeninfo.filter((item) =&gt; item.id === screenId);
      let result = filteredSreen[0];
      console.log(result); // {id: "2", screen: "2", layer: "5", time: "13:15", dimension: "2D",}  &lt;=line5
      console.log(result.id) // error
    };
  
    return (
      &lt;div className="bookInfo"&gt;
        &lt;div&gt;{movie}&lt;/div&gt;
        &lt;div&gt;{theater}&lt;/div&gt;
        &lt;div&gt;{filterScreen()}&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  </code></pre>