Accessing state from another component - reactjs

Question

I am attempting to access state from another component in the correct way. From what I understand is you cannot access state directly but the state should be lifted. For my purpose I am trying to access the name of the user from my profile component in my form component with localStorage.
My Profile Component ....
import React, { Component } from 'react';
import NavigationBar from './NavigationBar'
export default class Profile extends Component {
documentData;
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.state = {
name: '',
email: '',
phone: '',
address1: '',
address2: '',
addresscitystate: '',
addresszip: ''
}
}
handleChange= (e)=> {
this.setState({[e.target.name]:e.target.value});
}
// on form submit...
handleFormSubmit(e) {
e.preventDefault()
localStorage.setItem('document',JSON.stringify(this.state));
alert ('Profile has been updated')
}
// React Life Cycle
componentDidMount() {
this.documentData = JSON.parse(localStorage.getItem('document'));
if (localStorage.getItem('document')) {
this.setState({
name: this.documentData.name,
phone: this.documentData.phone,
email: this.documentData.email,
address1: this.documentData.address1,
address2: this.documentData.address2,
addresscitystate: this.documentData.addresscitystate,
addresszip: this.documentData.addresszip,
})
} else {
this.setState({
name: '',
phone: '',
email: '',
address1: '',
address2: '',
addresscitystate: '',
addresszip: ''
})
}
}
render() {
return (
<div className="container">
<NavigationBar />
<div>
<h1 className='profile-title'> Profile </h1>
</div>
<form onSubmit={this.handleFormSubmit}>
<div className="form-group">
**<input type="text" name="name" className="form-control" value={this.state.name} onChange={this.handleChange} />
<label>Name</label>**
</div>
....
My Form Component....
import {useState, useEffect} from 'react'
const Form = () => {
//initial state
const [transaction, setTransaction] = useState({
description: '',
amount: ''
})
const [list, setList] = useState(
JSON.parse(localStorage.getItem('list')) || []
)
const [balance, setBalance] = useState('')
const [income, setIncome] = useState(
JSON.parse(localStorage.getItem('income'))
)
const [expense, setExpense] = useState(JSON.parse(localStorage.getItem('expense')))
//updates based onChange value
const updateBalance = (e) => {
setTransaction({
...transaction,
[e.target.name]:
e.target.type === 'number' ? parseInt(e.target.value) : e.target.value
})
}
//identify if transaction is income/expense
const plusMinus = () => {
transaction.amount > 0
? setIncome(income + transaction.amount)
: setExpense(expense + transaction.amount)
}
// updates balance after transaction is added
const getBalance = () => {
const amounts = list.map(i => i.amount);
const money = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2);
setBalance(money)
}
useEffect(() => {
getBalance()
localStorage.setItem('list', JSON.stringify(list))
localStorage.setItem('income', JSON.stringify(income))
localStorage.setItem('expense', JSON.stringify(expense))
}, [])
//clear transaction list
const clearBudget = () => {
localStorage.clear();
alert ('Balance has been cleared, Please Refresh Page')
}
const onSubmit = e => {
e.preventDefault();
setList([transaction, ...list])
plusMinus()
setTransaction({ description: '', amount: ''})
}
return (
**<div>
<div className='totals'>
<h2 className='balance'> Hello User, Your Current Balance </h2>
<h3> ${balance} </h3>
</div>**
...
Any advise on how to start would be appreciated!
Thanks.

Answer 1

Since you want to make your user accessible within your whole app passing it down to your component is not advisable as it'll cause prop drilling which is not a good practise. To avoid that problem then you should consider using a built-in feature of react called ContextAPI or any other state management library like Redux of Flux. But since your app is not complex then, ContextApi would be a good choice.

Answer 2

When you need to access state from multiple components you should either use Context API or a State Management Library such as Redux. Please note that Redux is used mostly in bigger applications, the ContextAPI should be more than enough for your use case.