How to get rid of "Functions are not valid as a React child" warning in React app

Question

I am new in React and I am Developing simple CRUD application in React with the help of Hooks.
The app has two form components AddUserForm and EditUserForm which add and edit users list corespondingly. Also there is a component which displays the list of users (but I have not got warnings there).
Everything works fine but I have the following warning message in my browser's console:
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..

Here is how I render child components in my App.js file. (I marked the lines where I have warnings with red arrows)

Update Here is how I handle form in AddUserForm component:

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>
);

I have checked some solutions that are written for example here but none of them were helpfull for this issue.
Could you give me any hint of what I am doing wrong?

Your console warns you about AddUserForm component, it looks like the problem in there. — Ruslan Shashkov, Feb 17 '20 at 12:37

score 1 · Accepted Answer · answered Feb 17 '20 at 12:46

I think it's just a typo:

<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>

Should be like this:

<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

This actually is not a React issue, but an invalid HTML causing React to throw an error, as it can't parse and render JSX.

How to get rid of "Functions are not valid as a React child" warning in React app

1 Answers1