How to Update the Parent'S State in React

How can I update the parent's state in React?

For child-parent communication you should pass a function setting the state from parent to child, like this

class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      someVar: 'some value'
    })
  }

  render() {
    return <Child handler = {this.handler} />
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick = {this.props.handler}/ >
  }
}

This way the child can update the parent's state with the call of a function passed with props.

But you will have to rethink your components' structure, because as I understand components 5 and 3 are not related.

One possible solution is to wrap them in a higher level component which will contain the state of both component 1 and 3. This component will set the lower level state through props.

Update parent state based on props and onClick from child in React

Pass down a callback to the child.

const Parent = () => {
  const [value, setValue] = useState('')

  return <Child setValue={setValue}/>
}

...

const Child = ({setValue}) => {
  // use setValue here which will update parent state
}

React hooks updating parent state through child and rerendering

Looks like you're not utilizing the useState hook correctly when it comes to adding an item to an array. You'll need to utilize the ... spread operator. Try changing your code to something like this:

const appendFile = () => {
   let old = props.files;
   props.updateFiles([...old, "asdf"]);
};

Also, when utilizing some events such as mousemove, you'll need to use the callback version:

const appendFile = () => {
   props.updateFiles(oldArray => [...oldArray, "asdf"]);
};

React-native: How to update parent's state from child component?

your problem is happening here

const myHandler = () => {
    const tn = new Date();
    setStartTime(tn);
    console.log(tn, startTime);
}

you are setting the state and trying to log it directly which doesn't work in react native, as react native takes a snapshot of the state on every render, so changes to the state will not be reflected until the next render.

basically, your state is being updated correctly, but trying to use or log the value directly will not work as it will only be able to access the old snapshot. (if you really need to use the value directly, then just use the tn variable you already have instead)

React JS: State Changes on Child component updating the Parent Component

From gif it seems to me like whole page is reloading, but I'm not sure what is inside MediumButton component. By default button inside form element will submit the form on click, you need to implement preventDefault in your button onClick handler, here is an example how to do it:

function App() {
  const handleClick = (e) => {
    e.preventDefault();
  }
  return (
    <div className="App">

      <form>
        <p>This is simple form</p>
        <button onClick={(e) => handleClick(e)}>hello</button>
      </form>
    </div>
    )
  };

React: Child don't update parent's state

The problem is that your <ActionModal> component is inside the <button> tag. So when clicking the Cancel button in the modal you first get the call to handleModalClose, immediately followed by the call to handleModalOpen, because the "click" is getting passed to the button that opens the modal.

You need to change the code in <TableIcon> to something like:

return (
    <>
      <button title={title} onClick={() => handleModalOpen()}>
        {icon}
      </button>
      <ActionModal open={modalOpen} handleClose={handleModalClose} />
    </>
  );

You can use this Stackblitz example.

How to update parent's component using state from child component in React?

In general, lift state up. In this case, it sounds like that means moving the state into Board and then passing that state to whatever child components need it (as a prop), and the state setter to whatever (other) child components need it.

Here's a minimal example of lifting state up. I haven't tried to recreate the full complexity of your example, just to provide an example of Parent having state that ChildA uses and ChildB sets:

const {useState} = React;

const ChildA = React.memo(({counter}) => {
    console.log("ChildA rendered");
    return <div>Counter = {counter}</div>;
});

const ChildB = React.memo(({setCounter}) => {
    console.log("ChildB rendered");
    return <input
            type="button"
            value="Increment Counter"
            onClick={() => setCounter(c => c + 1)}
        />;
});

const Parent = () => {
    const [counter, setCounter] = useState(0);
    return (
        <div>
            <ChildA counter={counter} />
            <ChildB setCounter={setCounter} />
        </div>
    );
};

ReactDOM.render(<Parent />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.development.js"></script>

---

Related Topics