React how to map a nested array?

Question

I'm trying to create various buttons for a configurator, but am having trouble on getting all the buttons to generate where they're supposed to be. I've gotten pretty close, but am stumped now. Any guidance would be greatly appreciated! Right now the Astra Blue/Spring Green colors are populating under both the Body and Drawer label. Where as the Dash Pink and Weston Grasscloth aren't appearing at all.

const materials = [
      { 
      id: 1, 
      part: "Body",
      material: [
        {
        id: "Astra Blue",
        type: "Lacquer",
        diffuse:"image URL", 
        normal: "image URL", 
        orm: "image URL", 
        },
        {
        id: "Spring Green",
        type: "Lacquer",
        diffuse:"image URL", 
        normal: "image URL", 
        orm: "image URL", 
        },
      ],
      },
      { 
      id: 2, 
      part: "Drawer",
      material: [
        {
        id: "Dash Pink",
        type: "Lacquer",
        diffuse:"image URL", 
        normal: "image URL", 
        orm: "image URL", 
        },
        {
        id: "Weston Grasscloth",
        type: "Grasscloth",
        diffuse:"image URL", 
        normal: "image URL", 
        orm: "image URL", 
        },
      ],
      }
    ];

const [{material}] = materials
    return (
        <div>
        {materials.map((sections, index) => {
            return (
            <div>
                <input
                type='radio'
                name='accordion'
                id={index}
                className='accordion__input'/>
            <label htmlFor={sections.part} className='materialLabel'>
                {sections.part}
            </label>
            <div>
                {material.map((materialName) => {
                    return (
                    <button 
                        key={materialName.id} 
                        onClick={swapBody} 
                        className='item' 
                        value={materialName.diffuse} 
                        data-value={materialName.normal}
                        data-value2={materialName.orm}>
                        {materialName.id}
                    </button>
                  );
                })}
              </div>

            </div>
            
          );
        })}

I tried creating a runnable snippit, but I'm still learning this stack overflow stuff. So I'll keep trying to create a work-able/simple demo if needed!

Answer 1

You declared materials wrong since you cannot write a value which is a string and a list at the same time

 type: 'Lacquer' [{ id: 'Astra Blue' <-> [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}]

if you make a console.log(materials) the result is { id: 1, section: 'Body', type: undefined }

Moreover, you declared the id key twice in the same object.

The correct way should be:

const materials = [
  {id: 1, section: 'Body', type: 'Lacquer', list0: [{ id: 'Astra Blue', list1: [{diffuse:"image URL", normal: "image URL", metallic: "image URL"}], id1: 'Ballet Pink', list2: [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}]}]},
  {id: 2, section: 'Drawer', type: 'Grasscloth', list0: [{ id: 'Weston Grasscloth', list1: [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}]}]},
];

I chose random number for the variables.

Answer 2

You have an error in your materials declaration. type property has string before array of images.

Should work if you change materials declaration to

const materials = [
      {id: 1, section: 'Body', type: [{ id: 'Astra Blue' [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}], id: 'Ballet Pink' [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}]}]},
      {id: 2, section: 'Drawer', type: [{ id: 'Weston Grasscloth' [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}]}]},
    ];