title: How to access values in Reactjs
body: <p>I am trying to access the values stored in a list in my react component. When looped through, all data can be accessed but cannot be accessed by the syntax { variable.data_key }</p>
  
  <p>code: <a href="https://pastebin.com/wS5SL22n" rel="nofollow noreferrer">https://pastebin.com/wS5SL22n</a></p>
  
  <p>line 9: I initialized a list of data
  line 36: I started looping through the list of data.
  line 38: I created a table and tried to access items from the data list.
  line 55: take the table as state
  line 79: displaying the contents</p>
  
  <pre><code>import React, { Component } from "react";
  import "./App.css";
  
  class App extends Component {
    constructor(props) {
      super(props);
  
      /* DATABASE */
      const movies = [
        {
          id: 0,
          src:
            "https://image.tmdb.org/t/p/w185_and_h278_bestv2/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg",
          title: "movie one",
          overview: "overview one"
        }
      ];
  
      let movieRows = [];
  
      /* LOOPING THROUGH DATABASE */
      movies.forEach(item =&gt; {
        /* MAKING AN ELEMENT */
        const moveDataTable = (
          &lt;table key={movies.id}&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;img alt="poster" width="80" src={movies.src} /&gt;
                &lt;/td&gt;
                &lt;td&gt;{movies.title}&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        );
        /* PUSING DATA TO THE LIST */
        movieRows.push(moveDataTable);
        console.log(movieRows);
      });
  
      this.state = { rows: movieRows };
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;p&gt; {this.state.rows} &lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>