Why can't I push in <option> when I get the 'response.data'?

Question

Why can't I push in my <option> when I get the response.data?

type State = {
  companyManagerMap: null | Map<string, string[]>
}
  useEffect(() => {
    AdminListManager()
      .then((response) => {
        const { data } = response.data
         console.log( { data });
        setState((s) => ({
          ...s,
          companyManagerMap: new Map(
            Object.keys(data).map((key) => [key, data[key]])
          ),
        }))
      })
      .catch(showUnexpectedError)
  }, [showUnexpectedError])

data format

{"total":2,"data":[{"id":1,"name":"newspeed","contains_fields":[{"id":1,"name":"Official"}]},{"id":2,"name":"YAMAHA","contains_fields":[{"id":3,"name":"US"}]}]}

Answer 1

You are using your .map and Object.keys wrong

Look here at where you iterate over your Object keys properly :)

const data = {
  total: 2,
  data: [
    { id: 1, name: 'newspeed', contains_fields: [{ id: 1, name: 'Official' }] },
    { id: 2, name: 'YAMAHA', contains_fields: [{ id: 3, name: 'US' }] },
  ],
};


//now iterate over it properly
data.data.map((item) => {
  Object.keys(item).map((key) => {
    console.log(item[key]);
  });
});

console.log will return this output

1
newspeed
[ { id: 1, name: 'Official' } ]
2
YAMAHA
[ { id: 3, name: 'US' } ]

I'm guessing you want to add the new data from your res.data to a state

So you can do something like this:

const fetchData = async () => {
    try {
        const res = await AdminListManager()
        //do data manipulation over objects and set new state
    } catch (error) {
        showUnexpectedError()
    }
}

useEffect(()=> {
    fetchData()
}, [showUnexpectedError])