обновить состояние от дочернего компонента

Question

Я не могу обернуть голову вокруг этого. Я хочу обновить состояние из дочернего компонента

const Main = () => {
    const [brands] = useState([{ name: "John", age: 20 }, { name: "Mary", age: 10 }]);
    return brands.map(brand => <Child brand={ brand } />)
}

const Child = (props) => {
    const { age } = props.brand;
    return <button onClick={ "how to update age here and make it available in the parent component" } />
}

Answer 1

useState hook возвращает состояние, а также функцию для установки этого состояния. Вы можете передать этот установщик дочернему компоненту и вызвать его оттуда.

const Main = () => {
    const [brands, setBrands] = useState([{ name: "John", age: 20 }, { name: "Mary", age: 10 }]);

const updateState = (brand, indexToUpdate) => {
  const newState = [...brands];
  newState[indexToUpdate] = brand;
  setBrands(newState);
};

    return brands.map((brand, idx) => <Child brand={ brand } updateState} idx={idx} />)
}

const Child = (props) => {
    const { age } = props.brand;
    return <button onClick={() => props.setBrands(props.brand, props.idx) } />
}

Answer 2

Проверьте это решение

Отправка родительского состояния в качестве опоры дочернего компонента с использованием метода опоры для обработки обновления состояния