If I add onClick to div the whole website doesn't show up-CodePudding

I'm currently working on a seat booking website. I want to add an event listener to such that when it is clicked it can call the function that will store the value of div. However, whenever I add the onClick event inside the whole content in the website does not show up(only a blank page shows up). Is there something wrong with my code? Also, I'm quite new to react, so if possible can y'all explain your answers...?

Here is my code

    import React, { useState } from "react";

const Ticketing = () => {
    const [seat1, selectSeat1] = useState();
    const [seat2, selectSeat2] = useState();
    const [performance, selectPerformance] = useState("");
    const [seat, selectSeat] = useState("");
    return(
        <form>
            <div onClick={selectPerformance("Performance1")}>
                Performance 1
            </div>
            <div>
                Performance 2
            </div>

            <row>
                <div>
                    1
                </div>
                <div>
                    2
                </div>
                <div>
                    3
                </div>
                <div>
                    4
                </div>
                <div>
                    5
                </div>
                <div>
                    6
                </div>
            </row>
            
        </form>
    )

};
export default Ticketing;

import React, { useState } from "react";
import { HashRouter as Router,Route,Switch } from "react-router-dom";
import Auth from "routes/Auth";
import Home from "routes/Home";
import Navigation from "components/Navigation";
import Mypage from "routes/Mypage";
import { Redirect } from 'react-router';
import Ticketing from "routes/Ticketing";


const WebRouter = ({isLoggedIn}) => {
    return (
    < Router>
    {isLoggedIn && <Navigation/> }
        <Switch>
            {isLoggedIn? (
            <>
            <Route exact path="/Home">
                <Home/>
            </Route>
            <Route exact path="/Mypage">
                <Mypage/>   
            </Route>
            <Route exact path="/Ticketing">
                <Ticketing/>   
            </Route>
            </>
            ) : (
                <>
                <Route exact path="/">
                    <Auth/>
                </Route>
                <Redirect from = "*" to="/"/>
            </>

            )}
        </Switch>
    </Router>
    );
};

export default WebRouter;

CodePudding user response：

onClick event binding is wrong, you should pass a function to onClick, but you bind whatever is returned from selectPerformance function. Binding should be:

<div onClick={() => selectPerformance("Performance1")}>
 Performance 1
 </div>

Reason of too many re-renders: In this react docs link (https://reactjs.org/docs/state-and-lifecycle.html) under Let’s quickly recap what’s going on and the order in which the methods are called: part, 4th item tells:

Thanks to the setState() call, React knows the state has changed, and calls the render() method again to learn what should be on the screen.

So the reason is: when you update performance with selectPerformance function, state-related part gets re-rendered because there was a change in state. When state is re-rendered, selectPerformance gets called again. Because of that, state-related part gets re-rendered again, so selectedPerformance gets called again. Because of that state-related part ... infinite loop.

CodePudding user response：

I think the problem is in on Click function. Replace it with this piece of code.

 <div onClick={() => selectPerformance("Performance1")}>
     Performance 1
 </div>