在 React 中更新全局变量 / State

Question

Still quite new to React and have been working on a project. I've been needing to keep track of this counter as a global variable and update its value inside a component. I've declared this counter using the setState hook const [currentMaxRow, setRow] = useState(3) and I want to update this value inside the component it's being passed into. Not really sure how to go about this, thanks!

Answer 1

This is actually quite straightforward. The only thing you need to do is to also pass the "setRow" function to your child component. Now anytime you want to update the state in the parent, you basically call the function prop inside your child component.

However, I think it's worth mentioning that a component's state and a global variable are not the same thing. I highly recommend you read the React documentation regarding components, state and props. It'll clear things up a whole lot more!

Answer 2

Sample application using hooks

-passing value and function to child component.

 function App() {
  const [currentMaxRow, setRow] = React.useState(3)  

  const incrementVal = () => {
    setRow(currentMaxRow + 1);
  };
  return (
    <div>
      <p>You clicked {currentMaxRow} times</p>
      <Child count={currentMaxRow} incrementVal={incrementVal} />
    </div>
  );
}
const Child = props => (
  <>
    <button onClick={props.incrementVal}>Click me</button>
    <h3>{props.count}</h3>
  </>
);