-1

I have an array of objects being passed as props into a child component, where I would like to display items in a list.

The data props.itemAssociations looks like this:

[
  {source: "hello world", target: "my item"},
  {source: "my item", target: "hello world"}
]

Then I'm trying to create list items from the prop:

  let options = props.itemAssociations.map(items =>
    items.forEach((item, index) => (
      <li key={index} value={item.source}>
        {item.source}
      </li>
    ))
  );

This is resulting in items.forEach is not a function. Any tips/solutions to this error is being thrown?

userNick
  • 503
  • 4
  • 7
  • 25
  • 1
    `.forEach()` is an array method. The contents of your `itemAssociations` array are objects, so they don't have a `.forEach`. You can use `Object.entries()` to convert the properties to an array. *edit* except you don't need to do that at all; there's no need at all for anything like `.forEach`. – Pointy Apr 27 '20 at 18:56

1 Answers1

2

.map is already iterating over the array, so every items is one of the objects. No need to do the foreach.

let options = props.itemAssociations.map((item,index) =>
     <li key={index} value={item.source}>
       {item.source}
     </li>
)
Auskennfuchs
  • 1,577
  • 9
  • 18