Why is the number not growing as I expected, but increasing by 2 instead of 1?

Question

I have the following code in React:

let guest = 0;

functionCup() {
  guest = guest 1;
  return <h2>{guest}’s teacup</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

My desired result is:

<code>The first guest’s teacup
Tea cup for the 2nd guest
The third guest’s tea cup
</code>

However, the actual result returned is:

The second guest’s teacup,
The fourth guest’s tea cup,
The 6th guest’s teacup

Why is the increment of guest 2 instead of 1 as I specified?

Answer 1

Global state variables may not be a viable way to achieve this goal.

Based on what you mentioned in your question, you could try passing param as count.

import { useEffect } from "react";

const  Cup  = ({guestCount}) => {
    return 
为第{guestCount}位客人准备的茶杯
;
}

export default function TeaSet() {
  return (
    
    
    
    
    >
  );
}