arrays - Why is map function not working as expected? ReactJS

Question

I've got a .map function inside of return. Now every data I've managed to return expect one array of objects that I've have.

So how data looks (sorry for the screenshot, hard to copy and paste over here):

So in code I would use bankname like this:

{a &&
   a.map((item) =>
     item.banka.bankname.map((its) => (
         <div className='container p-3 my-3 bg-dark text-white'>
            <h2>{its}</h2>
         </div>
      ))
)}

And everything works fine. Now problem hits when I want to use eks,type inside of this container(where its is located). Now I cannot in any way to get it displaying bankname, eks, type 3 times(foreach bankname, eks, type make individual container). I've been trying whole day with various solution: place banka into array, place keys of banka at object etc. etc. I'm always getting all three into one single container or I'm getting 9 times of it when I map each key of banka

So I'm hoping that my code look like:

{a &&
   a.map((item) =>
     item.banka.map((its) => (
         <div className='container p-3 my-3 bg-dark text-white'>
            <h2>{its.bankaname}</h2>
            <h3>{its.eks}</h3>
            <h3>{its.type}</h3>
         </div>
      ))
)}

But when I'm using this I get error: item.banka.map is not a function.

Also whole code u can find on jsfiddle: https://jsfiddle.net/hwps4tjm/

Any ideas on how to manage this? Thanks

question from:https://stackoverflow.com/questions/65888524/why-is-map-function-not-working-as-expected-reactjs

Answer 1

{a &&
    a.map((item) =>
      item.banka.bankname.map((its, index) => (
     <div className='container p-3 my-3 bg-dark text-white'>
        <h2>{its}</h2>
        <h2>{item.banka.eks[index]}</h2>
        <h2>{item.banka.type[index]}</h2>
     </div>
  ))
)}