Как правильно передать значение из одного компонента в другой?

Question

У меня есть компонент, который содержит в себе форму модального окна. Есть второй компонент - кнопка. Кнопка расположена в отдельном файле. Подскажите, как мне передать данные из первого компонента в кнопку? Если я создаю новую кнопку на странице модального окна, то все работает, а если передаю данные, то нет.

<ButtonPrimary
  active={modalActive}
  setActive={setModalActive} >Записаться на прием</ButtonPrimary>
   <button onClick={onClickButon}>111</button>

Answer 1

Для передачи данных в другой компонент используются пропсы. У вас они тоже присутствуют, например, в дочернем компоненте вы получите пропс active со значением modalActive

Чтобы работать с пропсом, его нужно не только объявить в родительском, но и получить через параметр в дочернем, например:

import React from "react";

const ButtonPrimary = ({ active, setActive, message }) => {
    console.log(active);
    
    // some your code

    return (
        <button onClick={onClickButon}>{message}</button>
    )
}

export default ButtonPrimary;

Родительский компонент может выглядеть так:

import React from "react";
import ButtonPrimary from "./ButtonPrimary ";

const customButton = () => {
    return (
        <ButtonPrimary
            active={modalActive}
            setActive={setModalActive} 
            message="Записаться на прием" />            
    )
} 
        
export defualt customButton;

БЛОГ НА HUSL

Как правильно передать значение из одного компонента в другой?

Ответы (1 шт):