I have a React ponent that shows details of a soccer game when that game is clicked on in a table, called GameData. The table is part of another ponent, and it updates a variable that GameData uses to show the data. That variable is global, so using useState() inside of GameData doesn't work. How do I make GameData re-render when the variable updates/changes?

Here is what my GameData ponent is currently:

let gameToDisplay = {};

function displayGameData(gameId) {
    gameToDisplay = gameData.find(game => game.id === gameId);
    // This function runs when a game in the table is clicked. This part updates and works as expected. 
}

function GameData() {
    const [gdDisplay, setgdDisplay] = useState(true);

    function handleDetailClick() {
        setgdDisplay(!gdDisplay);
    }

    return (
        <div className='GameData box'>
            <h2>Game Details</h2>
            <div className='Links'>
                <ButtonGroup variant="contained" aria-label="outlined primary button group">
                    <Button onClick={handleDetailClick}>{gdDisplay ? 'Less' : 'More'} details</Button>
                </ButtonGroup>
            </div>
            {gdDisplay ? (
                <p className='data'>
// Data display that gets data from gameToDisplay 
                </p>
            ) : ( 
                <></> 
            )}
        </div>
    )
}

Yes, the button approach works, but you have to click the button twice for the data to update. I'm trying to change the data inside of <p className='data'> when gameToDisplay is changed. How can I watch for that variable to change and re-render <p className='data'> when that happens?

I have a React ponent that shows details of a soccer game when that game is clicked on in a table, called GameData. The table is part of another ponent, and it updates a variable that GameData uses to show the data. That variable is global, so using useState() inside of GameData doesn't work. How do I make GameData re-render when the variable updates/changes?

Here is what my GameData ponent is currently:

let gameToDisplay = {};

function displayGameData(gameId) {
    gameToDisplay = gameData.find(game => game.id === gameId);
    // This function runs when a game in the table is clicked. This part updates and works as expected. 
}

function GameData() {
    const [gdDisplay, setgdDisplay] = useState(true);

    function handleDetailClick() {
        setgdDisplay(!gdDisplay);
    }

    return (
        <div className='GameData box'>
            <h2>Game Details</h2>
            <div className='Links'>
                <ButtonGroup variant="contained" aria-label="outlined primary button group">
                    <Button onClick={handleDetailClick}>{gdDisplay ? 'Less' : 'More'} details</Button>
                </ButtonGroup>
            </div>
            {gdDisplay ? (
                <p className='data'>
// Data display that gets data from gameToDisplay 
                </p>
            ) : ( 
                <></> 
            )}
        </div>
    )
}

Yes, the button approach works, but you have to click the button twice for the data to update. I'm trying to change the data inside of <p className='data'> when gameToDisplay is changed. How can I watch for that variable to change and re-render <p className='data'> when that happens?

• javascript
• reactjs
• material-ui
• mui-x-data-grid

Share Improve this question Follow edited Jun 6, 2023 at 18:25 ajmcallister27 asked Jun 6, 2023 at 18:12 ajmcallister27ajmcallister27 10022 silver badges1010 bronze badges 1

• You can't do this, somehow your react ponents need to be "connected" to changes to that variable. Usually this is done via a hook of some kind. You seem to want to pass a global down the entire hierarchy of your ponents. You can read on useContext. I am not suggesting to actually use useContext but the usage scenarios contain useful information to help you determine whether context is the correct thing to use and what alternatives to consider. – apokryfos Commented Jun 6, 2023 at 18:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

How do I update React ponent on a global variable change?

You don't. Don't use global variables. Use state.

State doesn't have to be local to this exact ponent. If this ponent needs to be re-rendered based on a state change in another ponent, you have a variety of options:

• Lift state up so that it's managed by a mon parent ponent and passed to the child ponents as props.
• Use the useContext hook to manage state outside of the ponents.
• Use a custom hook which manages the state outside of the ponent(s) and provides access to reading and setting that state within any ponent which needs it.
• Use a "global" state management system which manages state outside of the ponents and allows ponents to subscribe to that state.

Basically, overall you're thinking about it the wrong way. You're trying to use React without using React by managing "state" manually in your global variables and re-rendering ponents manually with your own logic.

Don't.

React manages state updates and ponent re-renders. That's its core functionality. So if your goal is to use React then, well, use React.