CODEWITHSUNDEEP
javascriptreactjs
Dylan Bozarth
Dylan Bozarth

Reputation: 1694

Using a constant random variable in a randomly generated component

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

Upvotes: 2

Views: 388

Answers (2)

Dylan Bozarth
Dylan Bozarth

Reputation: 1694

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.

Upvotes: 0

Kartik Malik
Kartik Malik

Reputation: 495

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

Upvotes: 1

Related Questions