React error on onclick event and function handling

Question

I have this react code

const MenuItem = ({title, imageUrl, linkUrl}) => {
    const [isClicked, setIsClicked] = useState(false);

    const handleClick = () =>{
        setIsClicked(true);
    }

    const handleLocation = () => {
        if(window.location.pathname === '/movie'){  
            <MoviePage categoryId={linkUrl}/>
        }
    }

    return ( 
            <div className="menu-item">
                <div className="image-container" style={{backgroundImage:`url(${imageUrl})`}}/>
                    <div className="image-content"
                        onClick={handleClick}>
                        {isClicked ? {handleLocation}: null}
                        <h1>{title}</h1>
                </div> 
            </div>
    );
}

Here, on the onclick event I want to render the component on another page, so I used window.location, but getting this error

Uncaught Error: Objects are not valid as a React child (found: object with keys {handleLocation}). If you meant to render a collection of children, use an array instead.

`handleLocation` is a function and you are trying to render that, not a component. — DevThiman, May 18 '22 at 10:37
`{isClicked ? {handleLocation}: null}` should be `{isClicked ? handleLocation() : null}`. The `{`/`}` before `isClicked` and after `null` will change the context from JSX to JavaScript. `{handleLocation}` in plain JavaScript is simply a shortcut for `{ handleLocation: handleLocation }`. Since objects cannot be rendered by JSX this produces an error. You probably meant to call the function. Do note that `handleLocation` should also be updated to return a value. It currently never returns anything, so even with the error solved `` will never be rendered. — 3limin4t0r, May 18 '22 at 10:53

score 0 · Answer 1 · answered May 18 '22 at 10:34

0

This is not how you would navigate in a React app - you need a routing solution, for example https://reactrouter.com/

With react-router you can define and configure your routes and navigate to them without reloading the page.

Try to work you through the tutorial: https://reactrouter.com/docs/en/v6/getting-started/tutorial

Basically, you would have a router with routes like this:

 <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>

answered May 18 '22 at 10:34

Igor Gonak

2,050
2
10
17

I know I should use react-router, but now I want to navigate with window.location. Can you please help me with the error – Vasanti Suthar May 18 '22 at 10:36
is there any reason? – Igor Gonak May 18 '22 at 10:37

score 0 · Answer 2 · answered May 18 '22 at 13:33

From offical document,

You can put any valid JavaScript expression inside the curly braces in JSX.

JSX is an Expression Too After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

<div
  className="image-content"
  onClick={handleClick}
>
    {isClicked ? {handleLocation} : null} // should be {isClicked ? handleLocation() : null}
    <h1>{title}</h1>
</div>

In your code, handleLocation with curly braces will be the Javascript expression by JSX grammer. So {handleLocation} will be a reference of your function handleLocation. It is never called. You should make it called like handleLocation().

const handleLocation = () => {
  if (window.location.pathname === '/movie') {  
    <MoviePage categoryId={linkUrl}/> // it is just a expression, not returns any value
  }
}

One more change you need in your code is to return JSX element in handleLocation. <MoviePage /> in the if statement is just a expression. So this function whill never return any value. You should add return in front of <MoviePage />, then ReactDOM will render this component.

return <MoviePage categoryId={linkUrl} />

It is giving me this error Uncaught (in promise) Error: The message port closed before a response was received. — Vasanti Suthar, May 18 '22 at 21:06
@Vasanti Suthar [https://stackoverflow.com/questions/54126343/how-to-fix-unchecked-runtime-lasterror-the-message-port-closed-before-a-respon](https://stackoverflow.com/questions/54126343/how-to-fix-unchecked-runtime-lasterror-the-message-port-closed-before-a-respon) — Jae, May 19 '22 at 00:59
Okay, so now the error is gone, but it is not navigating to the new page — Vasanti Suthar, May 20 '22 at 20:17

React error on onclick event and function handling

2 Answers2