• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

127
Views
Map in map : TypeError: Cannot read properties of undefined (reading 'map')

I have these datas :

[
    {
        "id": "1",
        "name": "test1",
        "secondary": [
            "testS1", "testS2"
        ]
    },
    {
        "id": "2",
        "name": "test2",
        "secondary": [
            "testS3", "testS4"
        ]
    }
]

I map all exercices from a json file, and now I wish to loop props.exercices.secondary of each object. Here is my try :

export default function AllExos(props) {
    return <div>
        {props.exercices.map(exo => {
            return <div key={exo.name}>
                <div>
                     <h2>{exo.id}</h2>
                     <p>Display secondary :
                            {exo.secondary.map(k => {
                                return <span key={k}>{k}</span>
                            })}
                     </p>
                 </div>
             </div>
        })}
    </div>
}

I don't understand why I get the error TypeError: Cannot read properties of undefined (reading 'map'). I am looping in the 'props.exercices', right ?

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Try this condition props.exercices && props.exercices.length > 0 &&

 export default function AllExos(props) {
    return <div>
        {props.exercices && props.exercices.length > 0 && 
          props.exercices.map(exo => {
            return <div key={exo.name}>
             <div>
                 <h2>{exo.id}</h2>
                 <p>Display secondary :
                        {exo.secondary.map(k => {
                            return <span key={k}>{k}</span>
                        })}
                 </p>
              </div>
          </div>
       })}
    </div>
  }
almost 3 years ago · Juan Pablo Isaza Report

0

You can use optional chaining.

props?.exercices?.map(...)
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error