I am trying to map through the followin array:
{
"videos_json": [
{
"id": "Student 1",
"video": "VIDEO TO BE PLAYED",
"title": "first class",
"material": "lesson one material",
"description": "this will be your first lesson"
},
{
"id": "Student 1",
"video": "VIDEO TO BE PLAYED",
"title": "22",
"material": "Information Technology",
"description": "123"
},
{
"id": "Student 1",
"video": "VIDEO TO BE PLAYED",
"title": "22",
"material": "Information Technology",
"description": "123"
}
]
}
I have used the following code
import './videos_css.css';
import VideosJSON from '../../assets/mock.json';
function Videos(){
return(
{VideosJSON.videos_json.map((item, key) => (
<div className='videos'>
<div className='videos_play' key={key}> {item.video}</div>
<div className='videos_info'>
<h1 className='videos_info_title'> {item.title}</h1>
<h2 className='videos_info_material'>{item.material}</h2>
<p className='videos_info_description'> {item.description}</p>
</div>
</div>
))}
)
}
export default Videos
But I get this problem
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:UsersadjarDesktopJSlobo_em_ingleslobo_em_inglessrccomponentsvideosvideos_index.jsx: Unexpected token, expected "," (8:23)
6 |
7 | return(
8 | {VideosJSON.videos_json.map((item, key) => (
| ^
9 |
Does anyone have any idea why it is "expecting" a ","?
2
Answers
Try to use a valid tag with your data, like if you want to render images use tag in the map.
I suggest you do the same with the video, but first check it’s type.
Try to console.log() the data
this error happens because react read this code isn’t rendered as a jsx component
you need to wrap this code by a div, so react will read it as a jsx component