Why Can't I Update Props in React.Js

Can I update a component's props in React.js?

A component cannot update its own props unless they are arrays or objects (having a component update its own props even if possible is an anti-pattern), but can update its state and the props of its children.

For instance, a Dashboard has a speed field in its state, and passes it to a Gauge child thats displays this speed. Its render method is just return <Gauge speed={this.state.speed} />. When the Dashboard calls this.setState({speed: this.state.speed + 1}), the Gauge is re-rendered with the new value for speed.

Just before this happens, Gauge's componentWillReceiveProps is called, so that the Gauge has a chance to compare the new value to the old one.

Can't Get React Component to Update or Pass Prop

Well, the code is syntactically wrong.
You cannot render a Text in the onChange method of a button.

What you wanted was, when the count is updated in the Button, it should reflect in another component, i.e., the Text.

As these two are different components altogether, you have to have a shared state for them.

And for that, you can lift the counter state from Button to a parent component App. Check this out: https://reactjs.org/docs/lifting-state-up.html

This should work:

import React from "react";
import ReactDOM from "react-dom";

class Button extends React.Component {
  render() {
    // 3. on every click, Button uses App's updater method to update the count
    return <button onClick={this.props.handleCounter}>Click here</button>;
  }
}
class Text extends React.Component {
  render() {
    return (
      <h2 id="counter-text">{"Clicked " + this.props.counter + " times"}</h2>
    );
  }
}

// 1. Let App bear the counter state
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 1 };
    this.handleCounter = this.handleCounter.bind(this);
  }

  handleCounter() {
    this.setState({
      counter: this.state.counter + 1
    });
  }

  // 2. Let the Button and Text components share the App state
  render() {
    return (
      <>
        <Text counter={this.state.counter} />
        <Button
          counter={this.state.counter}
          handleCounter={this.handleCounter}
        />
      </>
    );
  }
}

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

Component not updating when I change the props that I pass to it in React

A component only updates once either its state changes or its props change. A state is a variable or set of variables which is remembered when the component re-renders. All other variables will go back to their default value as soon as the component re-renders. You can see it as the component's memory.

So in your case changing your text variable won't update your parent's state, and thus won't re-render the component, which in return won't re-render and update the child's component.

If you want your parent component to update it's state (and update the child's props) you need to declare your text variable like this:

const [text, setText] = React.useState("This is the original text");

Text is your variable, it is now included within your component's state and will be remembered when the component re-renders. You can give this any name you want.

setText is a function which updates your text variable and also re-renders your component and it's children. You can give this any name you want.

"This is the original text" is your initial state, the initial value for your text variable.

To update your state you can do something like this:

setText("This is the new text");

So in your case it will look something like this:

function MainPage(){
    const [text, setText] = React.useState("This is the original text");

    React.useEffect(() => {
        const timeout = setTimeout(function(){
            setText("This is the new text")
        }, 3000);

        return clearTimeout(timeout)
    }, []);

    return(<DisplayText text={text} />);
}

useEffect is necessary to be able to define your setTimeout as soon as the component mounts. It can be use to execute some code as soon as a certain variable (defined between the [] brackets) updates. For example: If you wrote it like this:

React.useEffect(() => {
    // execute some code
}, [text])

It would execute some code as soon as your text variables changes. Leave the [] brackets empty to only trigger useEffect when the component mounts and unmounts.

Within the useEffect hook you declare your setTimeout, this sets your timer as soon as the component mounts in this case.
The return method within your useEffect clears your timeout again as soon as the component unmounts. This will prevent your timer from running indefinitely after your component unmounts.

can't update state with props

I figured out that declaring state in the parent and passing state (instead of a global var) to the child was sufficient for the child using props to update always, no method in the child needed.

this stuff is not obvious and should be b̶e̶t̶t̶e̶r̶ explained in the docs.

How to Change Props value in React Js?

props should not be changed in react, they are readonly. update them in the parent component and then pass them down as the new value. the component receiving them should just be displaying them and the logic handling should occur at a higher level

React router : update props

All I had to do is using useLocation hook

in UpdateInvoice

  const location = useLocation();
  const [invoiceState, setInvoiceState] = React.useState<InvoiceProps>(location.state as InvoiceProps);

React.useEffect(() => {
    setInvoiceState(location.state as InvoiceProps);
  }, [location])

location variable contains the state I set here

<Button 
   variant="contained" 
   className="add" 
   onClick={() => navigate("/UpdateInvoice", {state: {idInvoice: '', isNew: true }})} 
   startIcon={<AddIcon />}>
       NEW INVOICE
 </Button>

This tutorial helped me

---

Related Topics