Как вывести данные в react в несколько строк

114
16 октября 2019, 22:10

Есть входные данные такого вида:

const toothData = [
    //1row topleft
    {
        id: 11,
    },
    {
        id: 12,
    },
    {
        id: 13,
    },
    {
        id: 14,
    },
    {
        id: 15,
    },
    {
        id: 16,
    },
    {
        id: 17,
    },
    {
        id: 18,
    },
    // 2row topright
    {
        id: 21,
    },
    {
        id: 22,
    },
    {
        id: 23,
    },
    {
        id: 24,
    },
    {
        id: 25,
    },
    {
        id: 26,
    },
    {
        id: 27,
    },
    {
        id: 28,
    },
    // 3row bottom-left
    {
        id: 31,
    },
    {
        id: 32,
    },
    {
        id: 33,
    },
    {
        id: 34,
    },
    {
        id: 35,
    },
    {
        id: 36,
    },
    {
        id: 37,
    },
    {
        id: 38,
    },
    // 4row bottom-right
    {
        id: 41,
    },
    {
        id: 42,
    },
    {
        id: 43,
    },
    {
        id: 44,
    },
    {
        id: 45,
    },
    {
        id: 46,
    },
    {
        id: 47,
    },
    {
        id: 48,
    },
]

Затем это выводится в такой шаблон

class ToothList extends React.Component {
    render() {
        const toothTemplate = this.props.data.map(function (item, index) {
            return (
                <div className="tooth-item" key={index}>
                    <IconTooth/>
                    <span>
                        {item.id}
                    </span>
                </div>
            )
        })
        return (
            <div className="tooth-list">
                {toothTemplate}
            </div>
        )
    }
}

Как вывести данный массив по 8 айтемов, обернутых в блок (Получается будет 4 строки) ?

Answer 1

const toothData = [ 
  //1row topleft 
  { 
    id: 11 
  }, 
  { 
    id: 12 
  }, 
  { 
    id: 13 
  }, 
  { 
    id: 14 
  }, 
  { 
    id: 15 
  }, 
  { 
    id: 16 
  }, 
  { 
    id: 17 
  }, 
  { 
    id: 18 
  }, 
  // 2row topright 
  { 
    id: 21 
  }, 
  { 
    id: 22 
  }, 
  { 
    id: 23 
  }, 
  { 
    id: 24 
  }, 
  { 
    id: 25 
  }, 
  { 
    id: 26 
  }, 
  { 
    id: 27 
  }, 
  { 
    id: 28 
  }, 
  // 3row bottom-left 
  { 
    id: 31 
  }, 
  { 
    id: 32 
  }, 
  { 
    id: 33 
  }, 
  { 
    id: 34 
  }, 
  { 
    id: 35 
  }, 
  { 
    id: 36 
  }, 
  { 
    id: 37 
  }, 
  { 
    id: 38 
  }, 
  // 4row bottom-right 
  { 
    id: 41 
  }, 
  { 
    id: 42 
  }, 
  { 
    id: 43 
  }, 
  { 
    id: 44 
  }, 
  { 
    id: 45 
  }, 
  { 
    id: 46 
  }, 
  { 
    id: 47 
  }, 
  { 
    id: 48 
  } 
]; 
 
class ToothList extends React.Component { 
  render() { 
    const { data } = this.props; 
    const rows = data.reduce( 
      (prev, el, i) => { 
        const subIdx = Math.floor(i / 8); 
        prev[subIdx] = [...(prev[subIdx] || []), el]; 
        return prev; 
      }, 
      [] 
    ); 
    return ( 
      <div className="tooth-list"> 
        {rows.map((row, i) => ( 
          <div key={`row-${i}`} className="tooth-row"> 
            {row.map((item, k) => ( 
              <div className="tooth-item" key={`row-item-${k}`}> 
                {/* <IconTooth/> */} 
                <span>{item.id}</span> 
              </div> 
            ))} 
          </div> 
        ))} 
      </div> 
    ); 
  } 
} 
 
class App extends React.Component { 
  render() { 
    return <ToothList data={toothData} />; 
  } 
} 
 
ReactDOM.render(<App />, document.getElementById('root'));
.tooth-row { 
  display: flex; 
  margin: 1em; 
  border-radius: 5px; 
  background-color: lightskyblue; 
} 
 
.tooth-row > .tooth-item { 
  margin: 0.5em; 
  padding: 0.5em; 
  border-radius: 5px; 
  background-color: lavender; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 
<div id="root"></div>

Answer 2

как вариант - можно добавить перенос строки после каждого восьмого элемента ну или еще что по желанию вместо br :

     class ToothList extends React.Component {
        render() {
            const toothTemplate = this.props.data.map(function (item, index) {
                return (
                 <React.Fragment>
                    <div className="tooth-item" key={index}>
                        <IconTooth/>
                        <span>
                            {item.id}
                        </span>
                    </div>
                {index%8===7 ? (<br/>) : null}
                </React.Fragment>)
                })
            return (
                <div className="tooth-list">
                    {toothTemplate}
                </div>             
            )
        }
    }
READ ALSO
Замена src у video, которое рисуется в canvas

Замена src у video, которое рисуется в canvas

Есть canvas, который рисует videoЯ хочу поменять источник видео и пока делаю это просто изменением атрибута src

152
SQL запрос в Excel на GO, оптимизация

SQL запрос в Excel на GO, оптимизация

Мне нужно сформировать отчет Excel и скачать егоДанные берутся из SQL ( примерно 200 тысяч строк на 70 столбиков)

111
Как обновлять дату

Как обновлять дату

Форма изначально невидима, открывается при нажатии на кнопкуВ форме есть поля, одно из которых input в который нужно вставить дату (каждый раз...

141