Question 290231 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – My state array is not rendering at component start. I am running a conditional to not get stuck in infinite loop

import React, {useState, useEffect} from "react";
import  { Grid, Card, CardContent, CardMedia, CardActionArea, Box, ButtonGroup, Button } from '@mui/material';
import abilities from "../../gameobjects/abilities";

function CharacterCard({character, actionRelay}) {
    const [roleabilities, setRoleAbilities] = useState([])
    
    if(roleabilities.length === 0){
        const abilitesArray = [];
        abilitesArray.push(abilities[character.role])
        setRoleAbilities(abilitesArray)
        console.log(roleabilities)
    }

    console.log(roleabilities)
    const buttonsArray = roleabilities.map((role, id) => {
        return( 
        <Button
          value={role.name}
          key={id}
          background={'../../images/buttons/slash.png'}
          >
        </Button>)
      })
    function performAction() {

    }
    return(
    <Card style={{display: 'flex', flexDirection: 'column'}}>
        <CardActionArea>
            <CardContent>
                 <h2>{character.name}</h2>
             <Box>
                <ButtonGroup>
                {roleabilities.length > 1 ? buttonsArray : 'Hold up'}
                </ButtonGroup>
             </Box>    
            </CardContent>
        </CardActionArea>
    </Card>
    )
 }


export default CharacterCard
Tags:

2

Answers


  1. 0

    When you call setRollAbilities what React does is flag the component as needing a re-render and then, on the next render, uses the new value.

    A state variable is something that changes from render to render. You set it’s initial value in the useState call, and then can update it when users, for example, click things or whatever. Right now you are setting it’s initial value to an empty array, but that doesn’t seem to be what you want it’s initial value to be.

    I’ve rewritten your useState call so that it is initialized properly to it’s actual initial value:

    
const [roleabilities, setRoleAbilities] = useState(
    [abilities[character.role]]
)

    and then you can get rid of the if(roleabilities.length === 0) block of code entirely

    Note: Really, right now it looks like you might be over-complicating things by making roleAbilities a state variable. Since you never use the setState functionality, you don’t need it to be state, it can just be a variable. You could for example just write:

    const roleabilities =  [abilities[character.role]]

    At present this would give you the same functionality. Unless you are actually gonna use setRoleAbilities to change the value, there is no need for it to be a state variable.

    Login or Signup to reply.
  2. 0

    You can modify your code to use the useEffect hook to trigger an update to your state when the component renders.

    import React, {useState, useEffect} from "react";
import  { Grid, Card, CardContent, CardMedia, CardActionArea, Box, ButtonGroup, Button } from '@mui/material';
import abilities from "../../gameobjects/abilities";

function CharacterCard({character, actionRelay}) {
    const [roleabilities, setRoleAbilities] = useState([])
    
  useEffect(() => {
   setRoleAbilities(abilities[character.role])
  }, [])

    console.log(roleabilities)
    const buttonsArray = roleabilities.map((role, id) => {
        return( 
        <Button
          value={role.name}
          key={id}
          background={'../../images/buttons/slash.png'}
          >
        </Button>)
      })
    function performAction() {

    }
    return(
    <Card style={{display: 'flex', flexDirection: 'column'}}>
        <CardActionArea>
            <CardContent>
                 <h2>{character.name}</h2>
             <Box>
                <ButtonGroup>
                {roleabilities.length > 1 ? buttonsArray : 'Hold up'}
                </ButtonGroup>
             </Box>    
            </CardContent>
        </CardActionArea>
    </Card>
    )
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search