How to access state from a component in React

How can I access my state from the component GamePieceSquares since GamePieceSquares is declared before the state is created?

Here is the code:

const GamePieceSquares = ({text, id} : {text:any, id:any}) => (
  <View style={styles.gamePieceSquares}>
    <Text style={styles.text} onPress={() => {console.log('You tapped the button!: '   text);}}>{text}</Text>
  </View>
);

export default function TabTwoScreen() {

  const [pieceSelectedID, setPieceSelectedID] = useState(0);

  return (
        <Card containerStyle={styles.container}>
            <Card.Title>CARD WITH DIVIDER</Card.Title>
            <View style={styles.gamePiecesRow}>
              <GamePieceSquares text="B" /><Text>{"\n"}</Text> 
              <GamePieceSquares text="D" /><Text>{"\n"}</Text> 
              <GamePieceSquares text="F" /><Text>{"\n"}</Text> 
              <GamePieceSquares text="G" /><Text>{"\n"}</Text> 
              <GamePieceSquares text="I" /><Text>{"\n"}</Text> 
              <GamePieceSquares text="O" /><Text>{"\n"}</Text> 
              <GamePieceSquares text="P" /><Text>{"\n"}</Text> 
              <GamePieceSquares text="L" /><Text>{"\n"}</Text> 
            </View>
            <Card.Divider />
        </Card>
      <View style={styles.container}><Text >Keyboard</Text></View>
  </View>
  );
}

Currently, when I click any of the GamePieceSquares, the text value of the component gets printed to the console.

My goal is this: when the GamePieceSquares get clicked, then set the pieceSelectedID to be the value of the id of the GamePieceSquares and then highlight the GamePieceSquare.

Long story short, I wanted to access the state so that I can correctly highlight the GamePieceSquare that was last clicked.

CodePudding user response：

The answer:

A react component's state is private, not accessible outside of itself, the way you can "inform" parent that there was a state change by passing a function, you can review the docs for reference.

Therefore, to achieve what you ask, you should have something like this:


\\ Notice I am adding two properties, 
\\ onClick -> a function to be executed when the text is pressed
\\ isSelected -> a boolean to indicate when the GamePieceSquare is selected

const GamePieceSquares = ({text, id, onClick, isSelected} : {text:any, id:any, onClick: (event) => void}, isSelected: boolean) => (
    <View style={styles.gamePieceSquares}>
      <Text style={styles.text} onPress={onClick}>{text}</Text>
    </View>
);

export default function TabTwoScreen() {


    \\ link to hooks at the bottom
    const [selectedSquareId, setSelectedSquareId] = useState(null)


    \\ internal function to execute when a GamePieceSquare is clicked on
    const _onClick = (event) => {
        \\ how to determine if something was selected with the event or 
HINT: the id
    };


    return (
        <Card containerStyle={styles.container}>
            <Card.Title>CARD WITH DIVIDER</Card.Title>
            <View style={styles.gamePiecesRow}>
                { // Notice I am providing both properties here }
                <GamePieceSquares 
                    text="L" 
                    onClick={_onClick} 
                    isSelected={
                        \\ You need to figure out how to determine if a square is selected
                    } 
                />
                <Text>{"\n"}</Text> 
            </View>
            <Card.Divider />
        </Card>
        <View style={styles.container}><Text >Keyboard</Text></View>
    );
}

Some concepts that will help a lot with this are:

CodePudding user response：

You can pass it as a prop. It's like any function which accepts params. You can declare the function first, and then call it later with dynamic variables, which in your case is state.

 const [pieceSelectedID, setPieceSelectedID] = useState(0);

  return (
        <Card containerStyle={styles.container}>
            <Card.Title>CARD WITH DIVIDER</Card.Title>
            <View style={styles.gamePiecesRow}>
// here ---> <GamePieceSquares text="B" pieceSelectedID={pieceSelectedID} /><Text>{"\n"}</Text> 
               ...
            <Card.Divider />
        </Card>
      <View style={styles.container}><Text >Keyboard</Text></View>
  </View>
  );