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>
)
}
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()}
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";
}
The key answer to your question is to understand the difference between:
onClick={() => (randomCard())} this is calling on requestonClick= {randomCard()} and this is just execution immediatelyI 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.