Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Fix React Error: Functions are not valid as a React child

I am following a react tutorial and I am adding a POST request and ran into the following error:

Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Before this I was looking at submit events, and everything was fine. The website still runs but I’m getting a fetch aborted message when I inspect my console.

I know They are a lot of similar errors on Stack overflow already and have reviewed several. I’ve seen a lot of problems and solutions, understood some. But none of them fit what I’m trying to do. Note: I’m a complete beginner in react this is my first web-application. The error only popped up after adding my POST request .
Create.js

import { useState } from "react";

const Create = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [author, setAuthor] = useState('mario');
  const [isLoading, setIsLoading] = useState(false);

   //Submit events
   const handleSubmit = (e) => {
    e.preventDefault();
    const blog = { title, body, author };
     setIsLoading(true);

    //POST request
      fetch("http://localhost:8000/blogs", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(blog),
      }).then(() => {
        console.log("new blog added");
        setIsLoading(false);
      })
   }

return (
 <div className="create">
  <h2>Add a new blog</h2>

//Input form
   <form onSubmit={ handleSubmit } >
    <label>Blog title</label>
    <input
     type="text"
     required
     value={ title }
     onChange={(e) => setTitle(e.target.value)}
    />
     <label>Blog body</label>
     <textarea
      required
      value={ body }
      onChange={(e) => setBody(e.target.value)}
      ></textarea>
      <label>Blog author</label>
    <select>

//Blog author
  value={ author}
  onChange={(e) => setAuthor(e.target.value)}
    <option value="mario">Mario</option>
     <option value="yoshi">Yoshi</option>
     </select>
    </form>

//Button
  { !isLoading && <button>Add blog</button> }
  { isLoading && <button disabled>Adding blog...</button> }
   <p>{ title }</p>
   <p>{ body }</p>
   <p>{ author }</p>
  </div>
  );
}
 
export default Create;
Tags:

3

Answers


  1. 0

    The problem is a syntax error in the following piece of code:

    <select> 
// Blog author   value={ author}   onChange={(e) =>
setAuthor(e.target.value)}

    This should be:

    <label>Blog author</label>
<select 
   value={author} 
   onChange={(e) => setAuthor(e.target.value)}
>
    Login or Signup to reply.
  2. 0

    learn about forms if your form should be in a submit statue, the type submit button should wrapped by form

    Login or Signup to reply.
  3. 0

    Add a Catch to your fetch and this will be able to log out the error that is apparently happening during the fetch.

    fetch("http://localhost:8000/blogs", {
 method: "POST",
 headers: { "Content-Type": "application/json" },
 body: JSON.stringify(blog),
  }).then(() => {
    console.log("new blog added");
    setIsLoading(false);
  }).catch((error) => {console.log(error)});
 }

    Aside from this, you could improve the readability of your add button code by changing it to this:

    { isLoading ? <button disabled>Adding blog</button> : <button>Add blog</button>}

    As you are checking whether loading is true or false you can simply change it to an inline if-else statement.
    Documentation on this: https://legacy.reactjs.org/docs/conditional-rendering.html#inline-if-else-with-conditional-operator

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search