Getting 'numPlay is not defined' error in React for button click method

April 18, 2022

I’m trying to call nextPage() in the getConfirm when somebody clicks the button "Confirm", but it says that numPlay is never defined in the getConfirm() method.

Please someone help me understand why/fix it! Thank you

const root = ReactDOM.createRoot(document.getElementById('root'));

const title = 
    <h1 style={{ fontSize: "40px" }}>
        Draft
    </h1>

const numPlayers = (
    <div id="numPlayers">
        {title}
        <h1 style={{ fontSize: "20px" }}>
            How many players would you like to draft with?
        </h1>
        <input id="numPlay" placeholder="Number of players" type="number"></input>
        <div>
        </div>
        <button id="confirm" onClick={getConfirm}>
            Confirm
        </button>
    </div>
);

function getConfirm() {
    var numPlay = document.getElementById("numPlay");
    root.render(nextPage);
}

const nextPage = (
    <div>
        {title}
        <h1 style={{ fontSize: "20px" }}>
            How many draftees are there?
            {numPlay}
        </h1>
    </div>
)

root.render(numPlayers);

>Solution :

You need to declare numPlay outside of getCOnfirm:

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

const title = <h1 style={{ fontSize: '40px' }}>Draft</h1>;
let numPlay;
const numPlayers = (
  <div id="numPlayers">
    {title}
    <h1 style={{ fontSize: '20px' }}>
      How many players would you like to draft with?
    </h1>
    <input id="numPlay" placeholder="Number of players" type="number"></input>
    <div></div>
    <button id="confirm" onClick={getConfirm}>
      Confirm
    </button>
  </div>
);

function getConfirm() {
  numPlay = document.getElementById('numPlay');
  root.render(nextPage);
}

const nextPage = (
  <div>
    {title}
    <h1 style={{ fontSize: '20px' }}>
      How many draftees are there?
      {numPlay}
    </h1>
  </div>
);

root.render(numPlayers);

But why are you using React by calling .render imperatively, are you trying to integrate some React components on an already existing SPA?