CODEWITHSUNDEEP
reactjs
user7974621
user7974621

Reputation:

Trouble passing props to imported component

I have a "main" component which imports two other components, which contain a form each, and I'm having trouble passing some values which I get from an API call in the main component.

This is an example of what's happening on the "main" component with one of the imported forms:

user_id = null;
email = "";

componentDidMount() {
    get(`user-data/`, this.token).then((response) => {
        this.user_id = response.user_id;
        this.email = response.email;
        // Doing a console.log at this point shows both values are assigned properly
        // And that they exist
    }).catch((error) => notify.notifyError(error.message));
}

<UserForm
  email={this.email}
  id={this.user_id}
></UserForm>;

Edit: I'm including the API call logic since I believe it has something to do with the issue.

export const get = async (url, authToken) => {
  try {
    const response = await axiosInstance.get(`${url}`, {
      headers: {
        "Content-Type": "application/json",
        Authorization: `${BEARER} ${authToken}`,
      },
    });
    return response;
  } catch (error) {
    throw new Error();
  }
};

On the UserForm component:

id = null;
email = "";

constructor(props) {
    super(props);
    this.id = props.id;
    this.email = props.email;
    // Doing a console.log here shows both props are empty
    // Trying to use either of them from here on out breaks the page
}

I assume the issue has to do with the components rendering before the value gets assigned, but I'm not entirely sure about it.

Why aren't the props received properly on the imported form, and how can I make sure they are?

Edit 2: Waiting for props to be set on componentDidUpdate works, but operating the way I need to creates and endless loop of execution of componentDidUpdate

  componentDidUpdate() {
    if (this.props.id) {
      console.log("props are set!");
      this.getData();
    }
  }

  getData() {
    get(`user-data/${this.props.id}`, this.token)
      .then((user) => {
        // This creates and endless loop of updating
        this.setState({
          ...user.data
        });
      })
      .catch((error) => notify.notifyError(error.message));
  }

Upvotes: 0

Views: 50

Answers (2)

tcf01
tcf01

Reputation: 1789

Since this two values are not managed by state, when the values varies, it won't triggered re-render. Hence, the props are not getting the up-to-date value. I suggest using state to handle those 2 values

constructor(props){
   this.state = {
    user_id = null;
    email = "";
   }
}

componentDidMount() {
    get(`user-data/`, this.token).then((response) => {
        console.log('response works fine?', response)
        this.setState = {
          user_id = response.user_id;
          email = response.email;
        }

        // Doing a console.log at this point shows both values are assigned properly
        // And that they exist
    }).catch((error) => notify.notifyError(error.message));
}

render(){

<UserForm
  email={this.state.email}
  id={this.state.user_id}
></UserForm>;

}

In your UseForm component, there is no need to place it in state unless you want to do further modification. I suggest directly test them in render method.


constructor(props) {
    super(props);
}

render(){
   const {id, email} = this.props
   return (
     <div>
        {id} and {email}
     </div>
   )
}

Upvotes: 0

Arpit Vyas
Arpit Vyas

Reputation: 2227

in your main component do like this

state = {
    email: '',
    user_id: null
}

componentDidMount() {
    get(`user-data/`, this.token).then((response) => {
        this.setState({
            email: response.email,
            user_id: response.user_id
        })
        // Doing a console.log at this point shows both values are assigned properly
        // And that they exist
    }).catch((error) => notify.notifyError(error.message));
}

and in your userform print your props like

componentDidUpdate(prevProps){
    console.log('this.props', this.props);
    console.log('prevProps', prevProps)
}

Upvotes: 1

Related Questions