Rendering an array.map() in React

Question

I am having a problem where I am trying to use array of data to render a

element. In the code below the console.log\'s are working fine,

Answer 1

Add up to Dmitry's answer, if you don't want to handle unique key IDs manually, you can use React.Children.toArray as proposed in the React documentation

React.Children.toArray

Returns the children opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down.

Note:

React.Children.toArray() changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, toArray prefixes each key in the returned array so that each element’s key is scoped to the input array containing it.

 

    

      {
        React.Children.toArray(
          this.state.data.map((item, i) => 
Test
)
        )
      }