Update state from other Component to Main Component - reactjs

Question

I created a component/file in my React-Project, so that I can better organize it.
I have exported a Login-Component <SignInSide></SignInSide> and imported it in my main file:
Main-File:
export default class Login extends Component {
constructor(props) {
super(props);
this.onChangeUsername = this.onChangeUsername.bind(this);
this.state = {
username: ""
};
}
onChangeUsername(e) {
this.setState({
username: e.target.value
});
}
render() {
return (
<SignInSide></SignInSide>
);
}
}
This is my very basic Login-Component. As I already said, I just want to call this.onChangeUsernam when I imported this as <SignInSide></SignInSide> but i dont know what I have to write inside the onClick-Argument inside of the Login-Component to get/update the state from the Main-File.
Login-Component
export default function SignInSide(props) {
return (
<form className={classes.form}>
<TextField/>
<Button>
Login
</Button>
</form>
);
}
I am very thankful for helping. Can you give me a short and easy to understand example, so that I can add this by myself to my project? I only have to understand, what i have to do.

Answer 1

To update the Login component's state, you need to pass props from parent component to child component (passing props from Login to SignInSide component).
Therefore, you need to pass onChangeUsername method as a prop to the <SignInSide/> component. Inside SignInSide component, you need to manage a local state to keep the text input that you entered. It only needs to be used when you're submitting the data which trigger the onClick function onChangeUsername which has been passed from parent component.
Main-File:
import { Component } from "react";
import SignInSide from "./SignInSide";
export default class Login extends Component {
constructor(props) {
super(props);
this.onChangeUsername = this.onChangeUsername.bind(this);
this.state = {
username: "",
};
}
onChangeUsername(data) {
this.setState({
username: data,
});
}
render() {
console.log("username updated: ", this.state.username);
return <SignInSide onChangeUsername={this.onChangeUsername} />;
}
}
SignInSide Component:
import { useState } from "react";
export default function SignInSide(props) {
const [data, setData] = useState("");
const handleChange = (e) => setData(e.target.value);
return (
<form>
<label>
User Name:
<input type="text" value={data} onChange={handleChange} />
</label>
<button type="button" onClick={() => props.onChangeUsername(data)}>
Submit
</button>
</form>
);
}
Application View
Check the console logs as shown in the application view to identify whether username is updated in main component.