Breaking News: Grepper is joining You.com. Read the official announcement!

functions are not valid as a react child

Add Answer

Donald Abua answered on December 30, 2020 Popularity 10/10 Helpfulness 2/10

answer functions are not valid as a react child

related Objects are not valid as a React child

related objects are not valid as a react child

related functions are not valid as a react child

related Functions are not valid as a React child

related React warning: Functions are not valid as a React child

functions are not valid as a react child

Comments(1)

/*
When ever you encounter this error, know that you've used a React 
component the wrong way(YourComp instead of <YourComp/> or YourComp()).
Passing in a function as a child without calling the said function,
regardless of the function being a React component or not will 
throw the same error. 

Example
The code below will throw a "functions are not valid as a react child" error
because the imported "Home" component passed as props to Route was passed 
as a normal Javascript function and not as a React component 
i.e Home instead of <Home/>


*/
//Invalid Code
import Home from "./[src]/Home";
export default function App() {
  return (
    <main className='container'>
      <NavBar />
      <Routes>
        <Route path='/' element={Home} />
      </Routes>
      <Footer />
    </main>
  );
}

//Valid Code
import Home from "./[src]/Home";
export default function App() {
  return (
    <main className='container'>
      <NavBar />
      <Routes>
        <Route path='/' element={<Home/>} />
      </Routes>
      <Footer />
    </main>
  );
}

//Valid Code
import Home from "./[src]/Home";
export default function App() {
  return (
    <main className='container'>
      NavBar()
      <Routes>
        <Route path='/' element={Home()} />
      </Routes>
      Footer()
    </main>
  );
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Feb 26 2022

Donald Abua

0 Answers Avg Quality 2/10

Closely Related Answers

Objects are not valid as a React child

Comment

import * as React from "react";
export default function NavBar() {

    const searchItem = {
        text: "Search",
        placeholder: "Search ItsJavaScript",
        autocomplete: true
    }

    return (
        <div>
            <label for="search">{searchItem.text}</label>
            <input type="text" placeholder={searchItem.placeholder} />
        </div>
    );

}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: itsjavascript.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 13 2022

Gorgeous Gazelle

0 Answers Avg Quality 2/10

objects are not valid as a react child

Comment

// You can't make App an async function... promises must be resolved other ways

// BAD
const App = async () => {
  const auth = await somePromise();
  return (
    <></>
  );
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 30 2020

jwstanly

0 Answers Avg Quality 2/10

functions are not valid as a react child

Comment

//instead of passing in a function as a child
   ❌     //this is not the correct way of doing it 
const MyElement = () =>(   
	<>
  		<h2>This is a sample element</h2>
  	</>
)

...return( <MyElement/>)
                 
  ✅     //do this instead   
const MyElement = (		
    <>
      <h2>This is the correct way</h2>
    </>
)

...return( <MyElement/>)

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 26 2021

tinydev

0 Answers Avg Quality 2/10

Functions are not valid as a React child

Comment

check the function and value that youre returning is right. It may be where you have to 
put variable but you put a function or on the other way around.

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 08 2023

Mr not.Ok

0 Answers Avg Quality 2/10

React warning: Functions are not valid as a React child

Comment

-2

render() {
  return (
    <div>
      {this.createSquare()}
    </div>
  );
}

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 16 2021

0 Answers Avg Quality 2/10

functions are not valid as a react child

Contents

More Related Answers

functions are not valid as a react child

Closely Related Answers

Objects are not valid as a React child

objects are not valid as a react child

functions are not valid as a react child

Functions are not valid as a React child

React warning: Functions are not valid as a React child

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.