How to put data inside a customize state in for loop in functional component

Question

I get the data from the API as follows:

[
  {
    "GroupA1": [
      {
        "code": 10,
        "name": "item1"
      },
      {
        "code": 11,
         "name": "item2"
      },
      {
        "code": 12,
         "name": "item3"
      },
      {
        "code": 13,
         "name": "item4"
      }
    ],
    "GroupA2": [
      {
        "code": 21,
         "name": "item5"
      },
      {
        "code": 20,
         "name": "item6"
      },
      {
        "code": 22,
        "name": "item7"
      },
      {
        "code": 23,
        "name": "item8"
      }
    ]
  },
  {
    "GroupB": [
      {
        "code": 70,
        "name": "item9"
      }
    ]
  },
  {
    "GroupC": [
      {
        "code": 50,
        "name": "item10"
      },
      {
        "code": 51,
       "name": "item11"
      },
      {
        "code": 52,
        "name": "item12"
      }
    ]
  },
  {
    "GroupD": [
      {
        "code": 40,
         "name": "item13"
      }
    ]
  }
]

I am using Redux.

After get the data in my React project and using the for loop and trace the data by console.log() , the data is displayed in the browser as follows:

{GroupA: Array(4)}
  GroupA: Array(4)
   0: {code: value, name: "value"}
   1: {code: value, name: "value"}
   2: {code: value, name: "value"}
   3: {code: value, name: "value"}


{GroupB: Array(1)}
  GroupB: Array(1)
   0: {code: value, name: "value"}


{GroupC: Array(3)}
  GroupC: Array(3)
   0: {code: value, name: "value"}
   1: {code: value, name: "value"}
   2: {code: value, name: "value"}


{GroupD: Array(1)}
  GroupD: Array(1)
   0: {code: value, name: "value"}

I want to put the data in the functional component and in the <select> tag which has the <optgroup> tag and <option> tag.

I want to put data such as GroupA, GroupB, GroupC and GroupD in the <optgroup> tag, and also put name and code in the <option> tag.

My component is as follows:

const FunctionalComponent = () => {

const [mystate , setMyState] = useState([
    {
      title: null,
      permission: [{ name: null, code: null }],
    },
  ]);

const datas = useSelector((state) => state.datas);

const dispatch = useDispatch();


useEffect(() => {
  dispatch(getDatas());


 for (var stuff in datas) {
    
      console.log( datas[stuff] );

     setMyState((t) => [...t, {title: [key]}]); //???

        value.map((v) =>
          setMyState((val) => [...val, { permission: [{ name: v.name }] ,[{ code: v.code }] }]) //???
        );
       
  }


}


return(

<div>

<select>
 <optgroup>  //show title
  <option></option>  //show name , code
 </optgroup>

</select>

</div>


)


}

export default FunctionalComponent

I can not display the data and they are not recognized as separate objects in the select tag.

How do I pass the data inside state when I get the data in the useEffect and inside the loopfor, so that the key be placed instead title. and value that contains the code and name also be placed instead code and the name of the state?

How can I access the title, name and code of the state in JSX?

Because the way I used does not work and the data is not transferred to the state.

Thank you to those who help me!

Answer 1

Check this sandbox

  <select>
    {data.flatMap(obj => Object.entries(obj)).map(objArr => {
      return (
      <optgroup label={objArr[0]}>
        {objArr[1].map(ob => <option value={ob.code}>{ob.name}</option>)}
      </optgroup>
      )
    })}
  </select>

What it does is that it uses flatMap to flatten all objects into 1 array and then you can iterate this array easily.

Each entry will be a new array. First element will be the "property", the optgroup and the second element will fill the option tags.