Как избавиться от предупреждения «Функции недействительны как дочерний элемент React» в приложении React

Question

Я новичок в React и разрабатываю простое приложение CRUD в React с помощью Hooks .
Приложение имеет два компонента формы AddUserForm и EditUserForm, которые добавляют и редактируют пользователей перечислите соответственно. Также есть компонент, который отображает список пользователей (но у меня там нет предупреждений).
Все работает нормально, но в консоли моего браузера появляется следующее предупреждающее сообщение:
Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it..

Вот как я отрисовываю дочерние компоненты в моем файле приложения. js. (Я отметил линии, где у меня есть предупреждения красными стрелками)

Обновление Вот как я обрабатываю форму в AddUserForm компоненте:

return (
 <Fragment>
  <form> // line 15, here I have warning as well
    onSubmit=
    {event => {
      event.preventDefault();
      if (!user.name || !user.username) return;

      props.addUser(user);
      setUser(initialFormState);
    }}
    <label>Name</label>
    <input type='text' name='name' value='' onChange={handleInputChange} />
    <label>Username</label>
    <input
      type='text'
      name='username'
      value=''
      onChange={handleInputChange}
    />
    <button>Add new user</button>
  </form>
 </Fragment>
);

Я проверил некоторые решения, которые написаны, например, здесь , но ни одно из них не помогло для этой проблемы.
Не могли бы вы дать мне подсказку, что я делаю неправильно?

Answer 1

Я думаю, что это просто опечатка:

<form> // You just closed form element, so 
onSubmit=
{event => { // this is a function returned as a React child
  event.preventDefault();
  if (!user.name || !user.username) return;

  props.addUser(user);
  setUser(initialFormState);
}}
<label>Name</label>
<input type='text' name='name' value='' onChange={handleInputChange} />
<label>Username</label>
<input
  type='text'
  name='username'
  value=''
  onChange={handleInputChange}
/>
<button>Add new user</button>

Должно быть так:

<form // Note the missing >
onSubmit=
{event => { // this is a function returned as a React child
  event.preventDefault();
  if (!user.name || !user.username) return;

  props.addUser(user);
  setUser(initialFormState);
}}> // form opening tag closed here

На самом деле это не проблема React, а недействительная HTML, в результате чего React выдает ошибку, так как не может проанализировать и отобразить JSX.