How to access values in Reactjs - reactjs

Question

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 }
code: https://pastebin.com/wS5SL22n
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
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 => {
/* MAKING AN ELEMENT */
const moveDataTable = (
<table key={movies.id}>
<tbody>
<tr>
<td>
<img alt="poster" width="80" src={movies.src} />
</td>
<td>{movies.title}</td>
</tr>
</tbody>
</table>
);
/* PUSING DATA TO THE LIST */
movieRows.push(moveDataTable);
console.log(movieRows);
});
this.state = { rows: movieRows };
}
render() {
return (
<div className="App">
<p> {this.state.rows} </p>
</div>
);
}
}
export default App;

Answer 1

You have accepted an answer but still, I want to provide a different logic.
The main problem here you are trying to reach the wrong item. You are trying with movies but in your forEach loop it is item. Though, I don't recommend using forEach like that then set the state. At some point, there might be some glitches. Use map for such situations. Also, do not use your constructor like defining your functions.
const movies = [
{
id: 0,
src:
"https://image.tmdb.org/t/p/w185_and_h278_bestv2/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg",
title: "movie one",
overview: "overview one"
},
{
id: 1,
title: "moview two",
overview: "something"
}
];
class App extends React.Component {
state = { movies: [] };
componentDidMount() {
this.setState( {movies} );
}
createTable = () => (
<table key={movies.id}>
<tbody>
{
movies.map( movie =>
<tr>
<td>
<img alt="poster" width="80" src={movie.src} />
</td>
<td>{movie.title}</td>
<td>{movie.overview}</td>
</tr>
)
}
</tbody>
</table>
);
render() {
return (
<div className="App">
{this.createTable()}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

movies is an array, not an object.
movies.forEach(item => ...) means for each item in the movies array. The individual item in the array is item, not movies. You are trying to display movies.src and movies.title. There is no src or title property on the movies array. These properties are on the item in the array. You should be using item.src and item.title.

Answer 3

Instead of accessing movie.id i needed to access item.id as i named the variable as item in the foreach loop.