Передача реквизита компонентам крючка становится неопределенной

Question

Как я могу передать реквизит в двух компонентах хука?

У меня есть root компонент, который использует Modal, мне нужно передать моему компоненту Modal реквизит title и показать в компоненте:

<Modal title="test" />

В модальном компоненте я получаю реквизиты в качестве параметра:

const Modal = (title) => {

return (
    <h6>{title}</h6>
)

Но я получаю неопределенное.

Я также пытался с {}:

const Modal = ({title}) => {

Почему?

Answer 1

Вам необходимо сослаться на объект props в дочернем компоненте:

const Modal = (props) => {

return (
    <h6>{props.title}</h6>
)

Или через деструктуризацию:

const Modal = ({title}) => {

return (
    <h6>{title}</h6>
)