importing and maping an array of JSON objs in React-CodePudding

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:\Users\adjar\Desktop\JS\lobo_em_ingles\lobo_em_ingles\src\components\videos\videos_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 ","?

CodePudding user response：

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

  import './videos_css.css';
import VideosJSON from '../../assets/mock.json';

function Videos(){
    

    return(
    <div>
            {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>
            ))}
     </div>  
    )

}

export default Videos

CodePudding user response：

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