How do I pass the data from one React.js file to another? - html

Question

I'd like to pass data from App.js to another .js file within React. Atm, I'm reading and writing from local storage between files but this seems inefficient. I'd like to only pull from local storage once when the App.js component mounts. This is what I'm doing currently.
App.js:
constructor(props) {
super(props);
this.state = {
user: {},
user_data: (localStorage.getItem('user_data')),
}
this.authListener = this.authListener.bind(this);
}
componentDidMount() {
this.authListener();
}
//checks firebase for authentication
authListener() {
Authentication.auth().onAuthStateChanged((user) => {
console.log(user);
if (user) {
this.setState({ user });
localStorage.setItem('user', user.uid);
this.pulldata_Health();
this.pulldata_Meals();
this.pulldata_Ingredients();
} else {
this.setState({ user: null })
localStorage.removeItem('user');
localStorage.removeItem('user_data')
}
});
}
//connects to database and stores data to local storage
pulldata_Health() {
database.collection('Health_data')
.doc(localStorage.getItem('user'))
.get()
.then(doc => {
const data = doc.data();
localStorage.setItem('user_data', JSON.stringify(data));
console.log(JSON.parse(localStorage.getItem('user_data')))
}).catch(function (error) {
console.error("Error reading health", error);
});
Homepage.js:
constructor(props) {
super(props);
this.state = {
healthData: (JSON.parse(localStorage.getItem('user_data')))
}
}
componentDidMount() {
this.GoalChecker();
console.log(this.state.healthData);
}
GoalChecker() {
if (this.state.healthData !== null) {
if (this.state.healthData.goal === 'Gain') {
this.setState({ gainImage: true });
this.setState({ recompImage: false });
this.setState({ loseImage: false });
console.log('gainimg')
}
if (this.state.healthData.goal === 'Recomp') {
this.setState({ gainImage: false });
this.setState({ recompImage: true });
this.setState({ loseImage: false });
console.log('recompimg')
}
if (this.state.healthData.goal === 'Lose') {
this.setState({ gainImage: false });
this.setState({ recompImage: false });
this.setState({ loseImage: true });
console.log('loseimg')
}
}
};
This all works, but pulling from local storage every time this page loads seems a bit inefficient. Is there any way to push the props of User data from App.js to my other page?

Answer 1

It is very difficult for me to explain, but i'll show you a video from YouTube how to do this with react-hooks. It is not a very difficult method
https://youtu.be/XuFDcZABiDQ

Answer 2

YOu can use react context. Create a context within app.js/at the top of your application. Wrap the top-level container using a context component. Within any child components, you can then access props in the global context.
A great tutorial that explains it is here, https://kentcdodds.com/blog/how-to-use-react-context-effectively