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

Question

[Gradlow]

export default const FavoriteMovie = () =>
return <>
List/ - Дочерний компонент
AddFavoriteMovie/ - Сюда нужно передать пропсы
>
}
>Дочерний компонент, из него нужно достать genres и languageGenres из состояния и передать их в родительский компонент
export default const List = () => {
const [genres, setGenres] = useState([])
const [languageGenres, setLanguageGenres] = useState();
}

Answer 1

[Семен Чернышев]

вот вам понятный пример)
Родитель ⬅️ Ребенок — используй Callback
Эта передача данных напоминает мне бумеранг, есть точка старта — это наш родительский компонент, есть точка максимального отдаления — это дочерний компонент. И есть наш инструмент —бумеранг, в реакте это будет функция, которая находится в родителе и передаётся через props в ребенка, где и вызывается.

1. Создаём в родителе функцию updateData. У неё есть входной параметр value, этот параметр мы присваиваем в стейт нашего компонента, с помощью функции setState. Бумеранг готов!

updateData = (value) => {
this.setState({ name: value })
}
2. Передаём в дочерний элемент через props функцию updateData. Мы запустили бумеранг :)


3. В дочернем элементе я создал кнопку, при клике на неё будет вызываться функция, которую мы передавали с помощью props. Ей передается новый параметр для текста, именно его мы хотим передать в родителя. Бумеранг возвращается назад.

{ this.props.updateData(this.state.name)}}>Запустить бумеранг

Comments

[Gradlow]

А есть функциональный пример?

Answer 2

[an6re9]

Не очень понял, что откуда надо достать, но если вам нужно получить значение из дочернего компонента в родительский, то это делается через коллбэки, при условии что у вас небольшое приложение.
Если что-то расширяемое и масштабное, то копайте в сторону state-менеджеров (Redux и для получения данных с сервера redux-thunk) или redux toolkit, или Mobx. В них данные, которые нужны в разных компонентах хранятся в едином хранилище к которому можно обращаться из любого компонента. Либо можно использовать встроенный хук useContext

import { useState } from "react";

export const Parent = () => {
const [value, setValue] = useState(null);
const getValue = (newValue) => setValue(() => newValue);
console.log(value);
return ;
};
const Child = (props) => {
const { getValue } = props;

return (

getValue(e.target.value)} />

);
};

и вот что предлагает чат GPT в качестве альтернативы с использованием useContext
import { useState, createContext, useContext } from "react";

const ValueContext = createContext(null);

export const Parent = () => {
const [value, setValue] = useState(null);

console.log(value);

return (



);
};

const Child = () => {
const setValue = useContext(ValueContext);

return (

setValue(e.target.value)} />

);
};