было бы интересно узнать как)

1. использовать npm ci
2. кешировать и шарить кеш npm между образами

Был бы код, разговор был бы более предметным

если ещё не подсказали, то гугли по слову masonry. На реакт тоже есть библиотеки

Это не масонри

спасибо

Есть несколько child'ов, внутри которых таблица и по клику на строку заполняются инпуты, часть кода:

return (
  <Row>
   <Col lg={24} md={24} sm={24} >
    <Input value={rowValue} style={{ marginLeft: '8px' }} />
    <Table
        dataSource={tableTypeDocDocuments}
         columns={columns}
          onRow={record => {
             return {
                 onClick: () => {
                  this.onClickRow(record);
                   this.props.updateData(record.ID); 
                 }
            }} />
   </Col>
   </Row>

в родителе создаю функцию для передачи данных

updateData = (data) => {
        this.setState({ componentData: data })
    }

и передаю в компонент

<Component updateData={this.updateData} />

так вот, нужно такие функции создавать под каждый child, которых не мало или можно как-то сократить?

разве нет?

У масонри нет ровной границы снизу

Это простой лейаут на 9 картинок

Массив в стейте делай плоским, пусть там будет только то что у тебя в поле fields, добавь к каждому объекту поле в котором будешь писать уволенные Hr и тд

Там где тебе нужно будет отображать только уволенных или hr используй filter

А обновление сделаешь как в той ссылке что я тебе кинул

.map(object => object.id === id ? {... object, updatedField: newValue } : object)

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery

да простят меня старейшие

спасибо

Спасибо))

return (
  <Row>
   <Col lg={24} md={24} sm={24} >
    <Input value={rowValue} style={{ marginLeft: '8px' }} />
    <Table
        dataSource={tableTypeDocDocuments}
         columns={columns}
          onRow={record => {
             return {
                 onClick: () => {
                  this.onClickRow(record);
                   this.props.updateData(record.ID); 
                 }
            }} />
   </Col>
   </Row>

updateData = (data) => {
        this.setState({ componentData: data })
    }

<Component updateData={this.updateData} />

В updateData ты можешь аргументом передавать не только данные но и мета информацию, с какого чайлда пришла инфа

Извиняюсь за оффтоп, но где можно почитать про именование ui компонентов, переменных во фронтенде? Эта тема меня в стресс вгоняет 😂 Хочу разобраться

Не волнуйтесь, это самая сложная тема в программировании, наряду с инвалидацией кеша

даже не сталкивался с таким, что включает в себя мета информацию? что-то загуглил не нашел ответа, либо не правильно понял

updateData = ({ name, data }) => {
        this.setState({ componentData: {...this.state.componentData, [name]: data} })
    }

Мета информация это общий термин. В примере выше параметр data - данные, name - метаданные