Home How can I send the value of a variable from one component to another? (React)

Questions

How can I send the value of a variable from one component to another? (React)

January 16, 2023

I have two components: Card.js and Score.js

I have a setScore in my Card.js component that increases by 1 every time I click a certain image.

Card.js

const Card = () => {
  const [score, setScore] = useState(0);

  const incrementScore = () => {
    setScore(score + 1);
    if (score >= 8) {
      setScore(0);
    }
    console.log(score);
  };

  return (
    <div>
    </div>
  );
};

I need to gain access to that specific Score value inside my second component but I can’t figure out how.

Score.js

const Score = () => {
  return (
    <div>
      <p>{`Score: ${score}`}</p>
    </div>
  );
};

>Solution :

You can use props :

// Card.js
return (
    <div>
        <Score score={score} />
    </div>
);

// Score.js
const Score = (props) => {
  return (
    <div>
      <p>{`Score: ${props.score}`}</p>
    </div>
  );
};

Here is the doc