CODEWITHSUNDEEP
javascriptreactjsstate
Stefan Januschke
Stefan Januschke

Reputation: 312

How to correctly pass State to a different function in React?

I have tried writing a simple rock, paper, scissors application using react. Now I am fully stuck at getting the pick in the dynamically painted radiobutton back to the main App.

I have tried countless things to get this working -> Below you can find the last piece of code tried. What would I have to do to acutally get this working ?

Thanks!

const Plays = (props) => {

  return (
    props.options.map(option =>
      <label key={option.name}>
        <input
          disabled={isEnemy(props.playerName)}
          key={props.playerName + option.name}
          className="gameItem"
          type="radio"
          onChange={(event) => {
            return props.setPlayerPick(option.name);
          }}
          value={props.playerName + option.name}
        />
        <img className="crop" src={option.img} alt="" />
      </label>)
  );
}

const App = () => {

  const [playerPick, setPlayerPick] = useState('')

  const options = [
    { name: 'rock', img: rock },
    { name: 'paper', img: paper },
    { name: 'scisscors', img: scissors }
  ]

  const playerName = ['Enemy', 'Player'];

  const handleOnSubmit = (event) => {
    console.log(playerPick);
  }

  return (
    <>
      <div className="description">
        This is a simple ( Rock | Paper | Sciscors ) game against a computer!
      </div>
      <div className="body">
        <div className="playerName">Enemy</div>
        <Plays options={options} playerName={playerName[0]} />
        <div className="playerName">You</div>
        <Plays handleChoosing={setPlayerPick()} options={options} playerName={playerName[1]} />
        <button onClick={handleOnSubmit} className="goButton">Go!</button>
      </div>
    </>
  );
}

Too many re-renders. React limits the number of renders to prevent an infinite loop.

This is the error I now get, so I feel like I successfully got the state over but it does render to often.

Upvotes: 4

Views: 74

Answers (3)

ravibagul91
ravibagul91

Reputation: 20755

Your problem is this,

handleChoosing={setPlayerPick()}

You are immediately calling the function on component load, so it taking you to infinite loop. You need to write only setPlayerPick like,

handleChoosing={setPlayerPick}

Also in Play component, you don't need to return anything, also from parent component you are passing props handleChoosing but in Play component you are using setPlayerPick which is wrong,

onChange={(event) => {return props.setPlayerPick(option.name);}}

You just need to do this,

onChange={(event) => props.handleChoosing(option.name)}

Upvotes: 0

Jay Code
Jay Code

Reputation: 21

I believe you're getting the error due to the function passed to handleChoosing. Try and change it to handleChoosing={() => setPlayerPick ()}

Upvotes: 0

Federkun
Federkun

Reputation: 36924

handleChoosing={setPlayerPick()} will, on every render, cause to render the component again, causing the infinite loop. You may just want to pass the function, instead of invoking it. Probably something like:

<Plays setPlayerPick={setPlayerPick} options={options} playerName={playerName[1]} />

Upvotes: 1

Related Questions