When to use onclick ={ myfuntion()} vs onclick={() => (myfunction())}-CodePudding

Why is the id undefined in the randomCard function when using the onClick= {(randomCard()} and defined when using onClick = {() => (randomCard())}

function Home() {
    const [cardlist, setCardList] = useState([]);
    const navigate = useNavigate()
    
    function randomCard() {
        const index = Math.floor(Math.random() * cardlist.length);
        const id = cardlist[index].id;
        navigate(`/cards/${id}`)
    }  

    useEffect(() => {
        async function fetchData() {
            const res = await axios.get('https://db.ygoprodeck.com/api/v7/cardinfo.php');
            const results = res.data;
            setCardList(results.data);
            console.log(cardlist);
        }
        fetchData();
    }, [])

    return (
        <div className='home'>
            <h1>Welcome to the Yu-Gi-Oh Database</h1>
            <p>Choose Option</p>
            <div className="options">
                <ul>
                    <li><a href='/allcards'>Show All Cards</a></li>
                    <li><a href='/'>Search Card</a></li>                    
                    <li><a href='' onClick={() => (randomCard())}>Random Card</a></li>                    
                </ul>
               
            </div>
        </div>
  )
}

CodePudding user response：

One would only use something like

onClick={randomCard()}

when that function returns a function. This situation isn't uncommon, eg:

const makeHandleClick = (id) => () => {
  setClickedId(id);
};

onclick={makeHandleClick(id))

But it's a common mistake to use onClick={randomCard()} when you actually only want to run the function when the element is clicked - in which case that will run the function immediately, when rendered, instead of when it's clicked (and will often result in too many re-renders and an error).

Use

onClick={randomCard}

when you want the function to run when the element is clicked, and not when the element is rendered.

The above is often equivalent to

onClick={() => randomCard()}

CodePudding user response：

The key answer to your question is to understand the difference between:

Calling onClick={() => (randomCard())} this is calling on request
Execute onClick= {randomCard()} and this is just execution immediately

I suggest you research a bit so it would be clearer to You, but in a nutshell, onClick={() => (randomCard())} this get's called when you click it and onClick= {randomCard()} this gets called when the file is loaded.

When you use "Execute" your data will not be fetched, and the function will be called before setCardList is assigned value to cardList. But when you use "Calling" your data is already fetched, and cardList is holding an array of data.

I hope I did not confuse you, just do a little research and you will get it, it is very much simple, just need to get the flow of rendering the component.