I am building a solar system app that automatically generates stars. My stars are a React component that accept a couple of props. When the user clicks the star, I need the system state to update and also I want the navlink to point to the same value.
let randomTypeVariable = starList[Math.floor(Math.random() * 6 + 1)];
return (
<NavLink
to={`/${randomTypeVariable}`}
onClick={() => props.setSystem(`${randomTypeVariable}`)}
className="starWrapper"
>
However at the moment the to= prop and the onClick function are giving different results. I know that this is because the randomTypeVariable is running each time and giving different results.
These components are being randomly generated so I cannot have the variable be a constant value.
How can I assign both of these properties to be the same randomly generated variable?
For context here is the full star component
let randomTypeVariable = starList[Math.floor(Math.random() * 6 + 1)];
const makeStars = (Count = 5) => {
if (Count > 0) {
return (
<NavLink
to={`/${randomTypeVariable}`}
onClick={() => props.setSystem(`${randomTypeVariable}`)}
className="starWrapper"
>
<Star
starName={`${makeStarName()}`}
starPosition={positionList[Math.floor(Math.random() * 9 + 1)]}
starType={`${starList[Math.floor(Math.random() * 6 + 2)]}`}
></Star>
{makeStars(Count - 1)}
</NavLink>
);
}
};
It shouldn't give a different result as randomTypeVariable is not a function, I tried this also.
Maybe I am missing something but still useMemo can solve your problem
const makeStars = (Count = 5) => {
let randomTypeVariable = useMemo(() => starList[Math.floor(Math.random() * 6 + 1)], []);
if (Count > 0) {
return (
<NavLink
to={`/${randomTypeVariable}`}
onClick={() => props.setSystem(`${randomTypeVariable}`)}
className="starWrapper"
>
<Star
starName={`${makeStarName()}`}
starPosition={positionList[Math.floor(Math.random() * 9 + 1)]}
starType={`${starList[Math.floor(Math.random() * 6 + 2)]}`}
></Star>
{makeStars(Count - 1)}
</NavLink>
);
}
};
So I wasn't able to solve this as much as get around it.
The first thing I did was remove the onClick from my component
let randomTypeVariable = starList[Math.floor(Math.random() * 6 + 1)];
if (Count > 0) {
return (
<NavLink
to={`/${randomTypeVariable}`}
className="starWrapper"
>
<Star
starName={`${makeStarName()}`}
starPosition={positionList[Math.floor(Math.random() * 9 + 1)]}
starType={`${randomTypeVariable}`}
></Star>
{makeStars(Count - 1)}
</NavLink>
And considering I was still able to use the navigation path of to={/${randomTypeVariable}} I was able to gather the information I needed from the URL of the page instead of the state.
let url = window.location.href
let modifiedUrl = url.split('/')
props.setSystem(modifiedUrl[3])
At last, the randomly generated components are consistent. However this is more of an avoiding the problem than actually solving it. If anyone has an actual solution please let your voice be heard here.