Return list from component

Question

One of my components creates a list of strings with random size (say 4~10 strings) everytime it is called.

Suppose the list is ["airplane", "ball", "car", "dice"].

I want to return a html structure that looks like this:

airplane   [button]
ball       [button]
car        [button]
dice       [button]

How can I do that? I don't know how to return a dynamic size thing.

Does this answer your question? [Is there a way to render multiple React components in the React.render() function?](https://stackoverflow.com/questions/32577886/is-there-a-way-to-render-multiple-react-components-in-the-react-render-functio) — Emile Bergeron, Apr 08 '21 at 00:11

score 1 · Answer 1 · answered Apr 07 '21 at 23:06

I assume since you tagged your question with react that you're using JSX.

You would just need to map through the array and insert the elements. Something like this:

return (
  <div>
    {yourList.map((item) => (
      <span>{item}</span><button>Click</button>  
    )}
  </div>
);

score 0 · Accepted Answer · answered Apr 07 '21 at 23:13

0

you’d better use the React Fragments and don’t forget about unique keys

<>
  {nameOfList.map(item => <span key={item}>{item} </span>)}
</>

answered Apr 07 '21 at 23:13

This solved the issue, although I had to put a button after the span. The first answer, for some reason, didn't compile. – Daniel Apr 08 '21 at 01:45

2 Answers2