Update components state from another component ReactJS - reactjs

Question

I'm making Log In Stuff for my application.All I want to is to update "username" in TodoApp.jsx component and set it to the same value as Login.jsx "Username"
Any suggestions?
TodoApp.jsx
class ToDoApp extends Component {
state = {
username:'',
inputValue: '',
todos: [],
currentPage: 1,
pageCount: 1,
itemsPerPage: 10,
};
This function creates new item and adds it to the todos:[] in state
addItem = () => {
let {todos} = this.state
if (this.inpRef.current.value === '') {
return alert('We dont do that here....')
} else {
axios
.post(`http://localhost:8080/add`, {
todo: this.inpRef.current.value,
checked: false,
})
.then((res) => {
this.setState({
todos:[...todos,{todo:res.data.todo,_id:res.data._id,checked:false}]
})
})
.catch((err) => {
console.log("err", err);
});
this.setPageCount()
}
this.inpRef.current.value = ''
console.log('--------this.state.todos', this.state.todos);
}
Here is Login.jsx code:
class Login extends Component {
state = {
username:'',
password:'',
}
This is a function which handles Log In.
handleLogIn = () => {
const { username, password } = this.state
if (password.length === 0 || username.length === 0 ) {
alert('Incorrect Login!')
} else {
axios
.post(`http://localhost:8080/logIn`, {
username: username,
password: password,
})
.then((res) => {
this.props.history.push("/todoapp");
console.log('res',res)
})
.catch((err) => {
console.log("err", err);
});
}
}

Answer 1

You can use the props property of React.js to achieve that.
If we assume that you've called your Login component in ToDoApp
(which makes ToDoApp the father and Login the child component); then what you can do is to define a method that sets the username state of the child component.
For example:
Login Component: Call the handle_username function of the father component once you set the username state.
this.setState({username: (username input)})
this.props.handle_username(this.state.username)
ToDoApp Component: Define the function handle_username and pass it as props to the Login Component.
handle_username = (username) => {
this.setState({username: username})
}
End pass it as props:
<Login handle_username={this.handle_username}/>

Answer 2

You can using Redux to achieve this.
passing props between this two components.
Calling API to update data and fetch API on another page.
Using browser localstorage to store the input data.