Trouble passing props to imported component - reactjs

Question

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));
}

Answer 1

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)
}

Answer 2

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>
)
}