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