Как передать данные из родительского компонента в дочерний ?
Спросят с вероятностью 7%

Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему.

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

1️⃣Создание родительского компонента:
✅В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать.
✅Затем передаем эти данные в дочерний компонент через пропсы.

2️⃣Приём данных в дочернем компоненте:
✅В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий.

Рассмотрим пример, где родительский компонент передает строку message в дочерний компонент.

Родительский компонент (ParentComponent.js):

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const message = "Привет, дочерний компонент!";
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent message={message} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js):

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>{props.message}</p>
        </div>
    );
}

export default ChildComponent;

Пояснение

1️⃣В родительском компоненте `ParentComponent`:
✅Создаем переменную message, содержащую строку "Привет, дочерний компонент!".
✅В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message.

2️⃣В дочернем компоненте ChildComponent:
✅Принимаем пропс message через параметр props.
✅Используем props.message для отображения переданной строки внутри тега <p>.

Дополнительные примеры

Родительский компонент (ParentComponent.js):

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const user = {
        name: "Иван",
        age: 25
    };
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent user={user} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js):

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>Имя: {props.user.name}</p>
            <p>Возраст: {props.user.age}</p>
        </div>
    );
}

export default ChildComponent;

В React данные передаются из родительского компонента в дочерний с помощью пропсов. В родительском компоненте данные передаются дочернему компоненту через атрибуты JSX, а в дочернем компоненте эти данные принимаются и используются через объект props.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых