How to get props in compononentDidMount() of child component

Question

I am trying to pass a parameter from the parent component to the child's component's ComponentDidMount() method. I am only able to receive the props inside the render() of the child component and I am not able to pass it to the ComponentDidMount() method.

Parent Component - Provider.js

  export default class Provider extends Component {
      constructor(props) {
        super(props);
        this.state = {
          carePlan: "",
          patID: ""

        };
      }

      async componentDidMount() {
        this.setState({
          carePlan: this.cp
          patID: this.props.location.state.id
        });
        console.log(this.state.patID);
      }

      render() {
        return (
          <div>
            <Layout>

                  {!this.state.cp ? (
                    <AddCarePlan patID={this.state.patID} />
                  ) : (
                    <div className="carePlan">
                      <DisplayCarePlan cp={this.state.carePlan} />
                    </div>
                  )}

              </Content>
            </Layout>
          </div>
        );
      }
    }

Child Component - AddCarePlan.js

class AddCarePlan extends Component {
  constructor(props) {
    super(props);
  }

  async componentDidMount() {
    const patientID = this.props.patID;
    console.log(patientID) // does not show ID
  }



  render() {
    const patientID = this.props.patID;
    console.log(patientID) // shows ID
    return (
      <div>
      <h1> Add Care Plan </h1>
      </div>
    );
  }
}

export default AddCarePlan;

Any reason to read props in componentDidMount? Do you want to reset your component back to the state it was earlier by using this approach ? — Inder

Lazar Nikolic Lazar Nikolic · Accepted Answer · 2019-04-15T05:07:47

You should remove keyword async before lifecycle methods in your components. As I can tell you are not using await nowhere inside of them and + React is not design to use them with async await functions. Even if you want to use componentDidMount to do some data fetching you should not use async since when data arrives, then() method on data fetching wil trigger component rerendering.

Try removing async from your code.

How to get props in compononentDidMount() of child component

3 Answers