According to the official way, key is definitely essential, and using map to render the array out and distribute the key is probably the best way for the job.

Therefore, I would still use map to loop through the array and wrap each item with any generic wrapper (<div> for block, <span> for inline) and individually assign the key for each child like so --

  <div className="card">
    {paragraphs.map((a, i) => {
      return <div key={i}>{a}</div>;
    })}
  </div>

See the code in action (copied your example)

https://codesandbox.io/s/naughty-albattani-6ddnkr?file=/src/App.tsx:127-237

In the end, you can pick whatever approach you think fits best according to your needs, as long as it meets the requirements of the feature. Having key for each item -- like the official doc said -- is good in general especially when you are trying to re-order or re-sort the list. If you know your list aren't going to do those, you can probably get away with just the idea you brought up.