Рекурсивно отображать элемент внутри элемента в реакции

Question

Вот так выглядит моя реакция l oop:

{Object.entries(mmValue.message.users).map(
  ([userKey, userValue]) => (
     <div className={"item"}>
        <img src={userValue.picture} />
      </div>
  )
)}

Ожидаемое HTML равно

<div class="container">
  <div class="item"><img src="https://qph.is.quoracdn.net/main-thumb-t-6967-200-rcsktwfqdpnhqloymmncxehvylehbalw.jpeg"/>
    <div class="item"><img src="http://i-cdn.phonearena.com/images/article/73429-image/Steve-Jobs-documentary-hits-theaters-and-video-on-demand-today.jpg"/>
      <div class="item"><img src="http://cdn.slashgear.com/wp-content/uploads/2014/10/Elon_Musk_LED_Lit_Wide-200x200.jpg"/></div>
    </div>
  </div>
</div>

Вопрос в том, как получить этот результат, используя l oop в реакции

Вот пример в коде ручки:

https://codepen.io/ehteshamkafeel/pen/OywvQM

Answer 1

Вы можете использовать .map () и можете создать отдельное использование этой функции для каждого из ваших изображений. Проверьте пример ниже.

const images = [
    'https://qph.is.quoracdn.net/main-thumb-t-6967-200-rcsktwfqdpnhqloymmncxehvylehbalw.jpeg',
    'image src of another image',
    'image src of another image'
]

const imgList = () => {
  const renderList = images.map((img, i) => {
    return <div key={i}> <img src={imgs[i]}/> </div>;
  });
  return <div className="item">{renderList}</div>

Answer 2

const imgs = [
    'img1.jpg',
    'img2.jpg',
    'img3.jpg'
];

const Items = ({i = 0}) => (<div className="item"><img src={imgs[i]}/>{i<imgs.length-1?(<Items i={i+1}/>):null}</div>);
return (
    <div className="container">
        <Items/>
    </div>
);