While I have a good understanding of passing data from one component to another using this.props, I am encountering difficulty in asynchronously fetching and storing values, such as from a database, that need to be accessed throughout the component. The challenge is that the variable needs to be loaded before the render method and cannot be altered once set.
In my first attempt:
import React from "react";
import ReactDOM from "react-dom";
let my_variable = "";
fetch("url", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({})
})
.then(data => data.json())
.then(result => {
return (my_variable = result);
});
The above approach did not work as the empty variable was passed into the component without being updated.
For option B:
import React from "react";
import ReactDOM from "react-dom";
class MyClass extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {};
}
render() {
return (
<>
<NewElement variableNeeded={this.props.my_variable} />
</>
);
}
}
export default MyClass;
Similarly, this solution failed because the value was fetched inside onComponentDidMount(), causing rendering to happen before data retrieval.
If you have any insights or solutions for this issue, your assistance would be greatly appreciated.