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

Question

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>
  )
}

Answer 1

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.

Answer 2

In React, the value of onClick must be a callback that returns something ( void ) :

onClick={() => { 
    console.log('clicked')}
}

So when passing functions() as a value to onClick, it’ll run when the component renders. In your case, onClick={randomCard()} will run before data fetching happens, which means the card's id is rather undefined. The example code below will log to the console on render and not on click :

// Outputs console log on render only
function doSomething() {
    console.log('executed without click event')
}

return(
    <button
      type="button"
      onClick={doSomething()}
    >
)

If you’re using Typescript you’ll see an error while typing:

Type 'void' is not assignable to type 'MouseEventHandler<HTMLButtonElement> | undefined'.This means we are executing JS (void) instead of passing a callback (MouseEventHandler) as a value.

Unlike handling HTML DOM events, where you can pass any JS code as a string to onclick and it’ll trigger a function when an element is clicked on. For instance:

// All work
<button onclick="document.getElementById('demo').innerHTML=1">Click me</button>
<button onclick="console.log('Hi')">Click me</button>
<button onclick="alert('Hi')">Click me</button>
<button onclick="greet()">Click me</button>

<p id="demo"></p>

function greet() {
    document.getElementById("demo").innerHTML = "Hello World";
}