'React props disappearing when adding scripts with hydrate

I am new to React and am trying follow this tutorial to build a simple page using React and Express. The page has a state of 0 and a button so that whenever the button is pressed, the state is incremented by one. Additionally, I have passed a props which I am also trying to display.

Here is how the react code looks:

import React from "react";

export default function Test(props) {
  const [number, setNumber] = React.useState(0);

  function add() {
    console.log(number);
    setNumber((number) => number + 1);
  }

  return (
    <div>
      {props.number} <br />
      <button onClick={add}>Click Me</button>
      <p>{number}</p>
    </div>
  );
}

The problem is that props.number appears only momentarily and then disappears. The button seems to work fine.

<!DOCTYPE html>
<html>
    <body>
    <div id="body"> <%- reactApp %> </div>
    <script src="/bundles/test.js" charset="utf-8"></script>
    <script src="/bundles/vendor.js" charset="utf-8"></script>
    </body>
</html>

Commenting out the bundle for test.js make the props appear but that would mean that the button won't work.

Here is the link to the sandbox. How do I display both the state and the props together?

Edit: To run the code first use npm run webpack on one terminal and then npm start on a different terminal

javascript reactjs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'React props disappearing when adding scripts with hydrate

Sources

Related Questions