Как обновить state child-a с parent компонента, react?

Question

[cester]

Добрый день! Подскажите пожалуйста как в react обновить state child с родителя если, child выводится циклом?
Оновиться ли он в таком случае?
Пример компонентов

export default class ParentBlock extends Component {
  static propTypes = {
    blocks: PropTypes.arrayOf(PropTypes.object),
  };

  render() {
    const { blocks } = this.props;
    return (
      <ParentBlocksList blocks={blocks} />
    )
  }
}

const ParentBlocksList = ({
  blocks,
}) => (
  <div>
    {blocks.map(block => (
      <ParentBlockItem
        key={block.id}
        name={block.name}
        values={block.values}
        disabled={block.disabled || false}
      />
    ))}
  </div>
);

const ParentBlockItem = ({
  name,
  values,
  disabled,
}) => (
  <div>
    <table>
      <tbody>
        {Object.entries(values).map(([name, val]) => (
          <ChildBlockItemRow
            key={name}
            name={name}
            value={val}
            disabled={disabled}
          />
      ))}
      </tbody>
    </table>
  </div>
);

export default class Child extends Component {
  static propTypes = {
    name: PropTypes.string,
    value: PropTypes.string,
    disabled: PropTypes.bool,
  };

  state = {
    value: this.props.value,
  };

  handleChange = (e) => {
    const { value } = e.target;

    this.setState({
      value,
    });
  };

  render() {
    const { name, disabled } = this.props;
    const { value } = this.state;

    return (
      <tr>
        <td>{name}</td>
        <td>
          <input
            type="text"
            value={value}
            onChange={this.handleChange}
            disabled={disabled}
            ref={(el) => {
              this.input = el;
            }}
          />
        </td>
      </tr>
    );
  }
}

Нужно чтоб Child обновлялся с ParentBlock компонента.
Скажите пожалуйста какое есть решение?

Answer 1

[Максим]

Ну так же как всегда, изменяете blocks - получается происходит перерисовка.
Чтобы избавиться от лишних перерисовок, если нельзя изменить такую вложенность, то добавляйте shouldComponentUpdate хук

Comments

[cester]

Мне нужно вот это перенести в ParentBlock

state = {
    value: this.props.value,
  };

  handleChange = (e) => {
    const { value } = e.target;

    this.setState({
      value,
    });
  };

ChildBlockItemRow вывожу через children в ParentBlock(или как?)
но как это сделать если ChildBlockItemRow выводится циклом?