how to store and iterate through array of objects

Question

I can't access the field from the object since it throws the following error:

TypeError: Cannot read property 'medicineId' of undefined when i try the peice of code below,

{medlist &&
  medlist.map(({medicineId, medicineName }) => (
    <li  key={medicineId} >
      <h1>{medicineName}</h1>
    </li>               
  ))
}

it gives me index.js:1 Warning: Each child in a list should have a unique "key" prop. even though the key is unique.but idk it gives me this unique key prop err cuz it is of type string.

Note that medicineId is of type string. and i tried to overcome this by changing that piece of code to,

{medlist &&
  medlist.map((med,idx) => (
    <li  key={idx} >
      <h1>{med.medicineName}</h1>
    </li>               
  ))
}

and now i dont get the warning for unique key but, there is no display of the tag med.medicineName. when i tried {console.log(med.medicineName)} it is undefined

const fetchMedicineList = () =>{
  return axios.get('http://localhost:8080/medicine')
    .then(({data})=>{
      console.log(data[0].medicineName)//this prints the medicine name.
      return data;
    })
    .catch(err =>{
      console.error(err)
    });
}
but when i tried to store the object array inside usestate,
  const [medlist, setMedlist] = useState([])or**useState([{}])**
 useEffect(() => {
        fetchMedicineList().then(medicineList=>{
            setMedlist([...medlist,medicineList]);
            
        })
        
    }, [medlist])
and i cant print or access medlist[0].medicineName ,it says **undefine** what am i doing wrong here, thanks.

Omkar Kulkarni · Accepted Answer · 2021-05-26 04:33:49Z

1

This just checks whether array is present. So this will always be true.

[] ? true: false; //true always

So you ll have to check the length of it like this

[].length ? true: false // false

So use this

{medlist.length &&
  medlist.map(({medicineId, medicineName }) => (
    <li  key={medicineId} >
      <h1>{medicineName}</h1>
    </li>               
  ))
}

answered May 26, 2021 at 4:33

Omkar Kulkarni

1,22512 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

HG.R Sanjayamal · Accepted Answer · 2021-05-26 05:08:52Z

0

You set the API response without spread operation in setMedlist useState.

Check this

const initailValue =[];
const apiResponse =[{
'medicineName':'abc'
}]
const neWArr = [...initailValue,...apiResponse]
console.log(neWArr[0].medicineName)

for your problem try this,

  const [medlist, setMedlist] = useState([])
  useEffect(() => {
    fetchMedicineList().then(medicineList=>{
        setMedlist([...medlist,...medicineList]);
        
    })
    
}, [medlist])

answered May 26, 2021 at 5:08

HG.R Sanjayamal

345 bronze badges

Collectives™ on Stack Overflow

how to store and iterate through array of objects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related