doc index page, jsx example has syntax error

[jhchen6]

at the babel docs' index page, the section about jsx and react, an example snippet goes like

export default function DiceRoll(){
  const [num, setNum] = useState(getRandomNumber());

  const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6);
  };

  return (
    <div>
      Your dice roll:
      {num}
    </div>
  );
};

which is not that good. it has a reference used before initiation (getRandomNumber), and a variable declared but never used (setNum).

a better one might be

export default function DiceRoll(){
  const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6);
  };

  const [num, setNum] = useState(getRandomNumber());

  const handleClick = () => {
    const newNum = getRandomNumber();
    setNum(newNum);
  };

  return (
    <div>
      Your dice roll: {num}.
      <button onClick={handleClick}>Click to get a new number</button>
    </div>
  );
};

[babel-bot]

Hey @jhchen6! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[JLHwung]

The proposed changes look good to me, can you open a PR?