React render компанента

Question

Есть компонент, он рендорится в цикле.

return (
    post.map((index)=>{
      
    return (
      
    <div className="responsive" key={index.id}>
      <div className="gallery">

      <Link to= {`/game/${index.slug}`}>
        <img src={index.poster} alt="Northern Lights" width="600" height="400"></img>
      </Link>

        <div>
          <div className="Completed_name">{index.name}</div>
          <div> <img id="like" src="images/like.png"  width="10" height="10"></img>{index.rating}</div>
        </div>

      </div>
    </div>)
    
  }
    )
  )

Хочу вот в этом коде не в файле вызова компонента а в этом,вставить вначале div блок,то есть

return (
       <div id="vt"></div>
        post.map((index)=>{
          
        return (....

чет не пойму как его так вставить. Чтоб перед map был блок.

Answer 1

JSX требует наличия обертки, если в коде 2 или более блоков на одном уровне. Если не предполагается наличие стилей у этой обертки или какого-то функционала, можно использовать React fragment, его сокращенная запись <></> - пустые теги

Также если Вы выводите какой-то не-JSX код внутри JSX-обертки, его необходимо обернуть фигурными скобками.

Кстати, map можно записать в сокращенном виде без return, если не требуется предобработка

Получается что-то такое

return (
    <>
      <div id='vt'></div>
      {post.map((index) => (
        <div className='responsive' key={index.id}>
          <div className='gallery'>
            <Link to={`/game/${index.slug}`}>
              <img
                src={index.poster}
                alt='Northern Lights'
                width='600'
                height='400'
              ></img>
            </Link>

            <div>
              <div className='Completed_name'>{index.name}</div>
              <div>
                <img
                  id='like'
                  src='images/like.png'
                  width='10'
                  height='10'
                ></img>
                {index.rating}
              </div>
            </div>
          </div>
        </div>
      ))}
    </>
  );

БЛОГ НА HUSL

React render компанента

Ответы (1 шт):