xxxxxxxxxx
// You can't make App an async function... promises must be resolved other ways
// BAD
const App = async () => {
const auth = await somePromise();
return (
<></>
);
}
xxxxxxxxxx
/*
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>
);
}
xxxxxxxxxx
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>
);
}
xxxxxxxxxx
//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/>)
xxxxxxxxxx
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.