React how to map a nested array?-CodePudding

I'm trying to create various buttons for a configurator, but am having trouble on getting my 'materials' to map correctly to the 'button'. Keeps throwing an error of "cannot read map", I got it to work before adding in the 'diffuse', 'normal', ect.. but I need those in order to map image URLs to another function that swap out the materials.

<script>
    export const ColorOptions2 = ({swapBody}) => {
    // const materialName = Object.keys(material);
    // if (!materialName) return <></>;

    const materials = [
      {id: 1, section: 'Body', type: 'Lacquer' [{ 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: 'Grasscloth' [{ id: 'Weston Grasscloth' [{diffuse: "image URL", normal: "image URL", metallic: "image URL"}]}]},
    ];


    console.log("material swap mounted")
    return (
      <div>
        
        {materials.map((sections) => {
          return (
            <div>
              <input type='radio' name='accordion' id={sections.id} className='accordion__input'/>
              <label htmlFor={sections.section} className='materialLabel'>{sections.section </label>
              <div className='items'>
              {sections.type.map((id) => {
                return (
                    <button key={id} onClick={swapBody} className='item' value={id.diffuse} data-value={id.normal} data-value2={id.metallic}>{id}</button>
                );
              })}
              </div>

            </div>
          );
        })}
        
      </div>
    );
}
</script>

CodePudding user response：

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"}]}]},
    ];

CodePudding user response：

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.