Image from console.log

Hey guys, I am new to React JS and basically web development itself. Does anyone know how can I access the highlighted part of the nested object? I already accessed some of the parts for example: I already accessed the name using: props.list.name But when it came to the constellations part, I had difficulties accessing it and displaying it. BTW, here is the API link https://api.genshin.dev/characters/eula Thank you in advance :)

CodePudding user response：

You can use map, to pass through all the elements in the array "constellations",

I don't know what your code looks like, it is better to put your own code, and edit your post, and because of you that your code does not exist, I put a simple example for you

const constellations = [
  {
    id: 1,
    name: "Dashboard",
    description:"icon",
  }, 
  {
    id: 2,
    name: "Dashboard",
    description:"icon",
  }]

{constellations.map(constellation =>(
      <div key={constellation.id}>
        <h1>{constellation.name}<h1/>       
      </div>  
 ))}

And if you use "props.list", you can write the code as:

{props?.list?.constellations?.map(constellation =>(
      <div key={constellation.id}>
        <h1>{constellation.name}</h1>    
        <h1>{constellation.unlock}</h1>
        <h1>{constellation.description}</h1>
      </div>  
 ))}

CodePudding user response：

props.list.constellations[your index].name

CodePudding user response：

You can use object destructuring for multi level nested objects.