JavaScript React Basics First Steps in React Embed JavaScript Expressions in JSX

getting error when placing elements in {}

hey guys i'm getting the following error:

app.js:4 Uncaught TypeError: header is not a function at <anonymous>:14:14 at i (babel.min.js:24) at r (babel.min.js:24) at e.src.n.<computed>.l.content (babel.min.js:24) at XMLHttpRequest.n.onreadystatechange (babel.min.js:24)

anyone know how to fix this? (everything was working before I used the {} notation instead of entering the elements

this is my code :

const title = <h1>my first react element</h1>; const desc = <p>i just learned how to create a react node and render it</p> ;

const header = header( <header> <h1>{ title }</h1> <p> { desc }</p> </header> );

ReactDOM.render ( header, document.getElementById('root') )

1 Answer

Hi Jason!

Look for clues in the error message.

This one says this: "header is not a function" at one point.

That tells me you have some syntax that is trying to use header as a function - somthing like:


So your issue is here:

const header = header( <header> <h1>{ title }</h1> <p> { desc }</p> </header> );

If you rewatch the video, you don't type the second "header" in the code.

It should be:

const header = ( 
    <header> <h1>{ title }</h1> <p> { desc }</p> </header>

I hope that helps.

Stay safe and happy coding!

Thank you!