I'm making a component using React's grommet.
After changing the state using setState from another component, I want it to be drawn in real time at the part to be drawn using state, but it is not done.
However, if you press the button of the same component after that, it will be drawn.
I'm also waving the key, so I'm not sure why it isn't drawn in real time.
If anyone knows, please comment.

Not redrawn in real time

Corresponding source code
<Box overflow = {"scroll"} fill>
        {Object.entries (props.materials) .map (// Confirm that materials have changed
          ([category, value], card_index) =>(
              flex = {false}
              key = {card_index}
            <Box margin = "xsmall">
                {value ["sample"] .map ((value, box_index) =>(// I want you to add it here
                <Box border = "true" key = {box_index}>
                    <Text size = "medium" margin = "xsmall">
                  <Button />
What I tried

Confirm that the contents of the state have changed.
Press a nearby button to redraw.

  • Answer # 1

    The essentialsetStateSince the part that is being done is not presented, it will be an Esper answer, but ...
    ProbablysetStateThe value you are trying to update in is an array or object type,this.stateI think this is because the value obtained in step 1 has been processed as it is.

    If it is an array[... this.state.hoge], If it's an object{... this.state.hoge}What was once stored in another variable likesetStateHow about doing it?