Реквизиты не определены внутри возврата, но определены иначе

Question

Я пытаюсь передать некоторые реквизиты от родительского к дочернему компоненту, но я очень запутался.Когда я пытаюсь напечатать реквизиты до возврата, я получаю значения, но если я пытаюсь использовать их в jsx, я получаю неопределенное значение.

const FormField = (empty, stateName, value, smallLetters, changeValue) => {
   console.log(empty, stateName, value, smallLetters, changeValue);
  return(
    <div>
      {console.log(empty, stateName, value, smallLetters, changeValue)}
  <label htmlFor="formGroupExampleInput">{value}</label>
   <input type="text" className='form-control' required onChange={(e) => { changeValue(e, stateName); }}/>
  </div>
);
}

Результат из операторов печати:

Answer 1

Ваш функциональный компонент может принимать свойство props в качестве аргумента в () - скобках, затем вы можете деструктурировать его следующим образом

без деструктурирования - const FormField = (props) и затем обращаться к своим реквизитам в рендере, используя props.empty, реквизиты StateName и т. д.

с деструктурой const FormField = ({empty, stateName, value, smallLetters, changeValue})

Answer 2

Компонент реагирующей функции ожидает props как объект, а не как отдельные аргументы.

Попробуйте

const FormField = ({empty, stateName, value, smallLetters, changeValue}) ....

Answer 3

Я нашел ответ

const FormField = (state) => {
  const propsNow = state;
  return (
    <div>
      {console.log(propsNow.empty)}
      <label htmlFor="formGroupExampleInput">{propsNow.value}</label>
      <input type="text" className='form-control' required onChange={(e) => { propsNow.changeValue(e, propsNow.stateName); }}/>
    </div>
  );
};