Как осуществить условный рендеринг в реакте?

Question

[bacca]

Добрый день, обхожу циклом массив данных? нужно, чтобы каждые 3 слайда заворачивать в новый "row". подскажите пожалуйста как реализовать это.
{slides.map((slide, index ) => (
index !== 0 &&index % 3 === 2) ? : ''
"component" Item
key={index}
data={slide}
/ "closeComponent"
slides.length=== index + 1 || index % 3 === 1 ? : ''
))}

Comments

[Сергей Сергей]

// сперва поделить на группы по три
slides.reduce( (a, slide, index) => {
  if( index % 3 === 0 ) a.push( [] );
  a[ a.length-1 ].push( slide );
}, [] )
// потом применяем группу в компонент
.map( component )

Answer 1

[Антон Спирин]

const rows = slides.reduce((acc, el, i) => {
  if(i % 3 === 0) acc.push([]);
  acc[acc.length-1].push(el);

  return acc;
}, []);

return (
  <Wrapper>
    {rows.map((row, index) => (
      <Row key={index}>
        {row.map((slide, i) => <Slide key={i} data={slide} />)}
      </Row>
    ))}
  </Wrapper>
);

Comments

[bacca]

Спасибо за изящное решение, я догадывался о чем то подобном, но в познания в js не достаточно глубоки.
если кому интересно, итоговое решение с подстановкой дефолтного значения в массив слайдов.

Буду очень благодарен, если кто то даст годную инфу с примерами использования "Array.prototype.reduce/map/etc"

Answer 2

[Coder321]

function createWrappedSlides(slides, count = 3) {
    const wrappedSlides = [];
    for (let i = 0; i < slides.length; i += count) {
        wrappedSlides.push(slides.slice(i, i + count));
    }
    return wrappedSlides;
}
 createWrappedSlides(slides).map((slide, i) => <Slide key={i} data={slide} />)