React: send data from Child component to Parent component - reactjs

Question

This is a react beginners exercise so I'm looking for the simplest solution. I'm currently learning React so any helpful comments would also be appreciated. Thanks in advance!
This is the exercise:
In a functional component, create a div which contains 2 inputs and one button.
Each of these should be a separate child component, all rendered by a parent component called App.
You should collect the data from the inputs and make it available in the parent component (using a function would work for this).
Input 1 should collect the user's email.
Input 2 should collect the user's password.
When the button (also a separate component) is clicked then you should alert the data collected by the two inputs.
You should use the onChange and onClick events
I'm not quite sure what I have to do with the Button component. This is what I have so far for the exercise but I think it's wrong?......
APP.JS
import React from 'react'
import Email from './components/Email'
import Password from './components/Password'
const App = () => {
getData = data => '${data}'
return ( <div>
<Email getData = {getData} />
<Password getData = {getData} />
</div>
)
}
export default App
EMAIL.JS
import React from 'react'
const App = () => {
let email = '';
return (
<button onClick ={()=>props.getData({email})}></button>
);
}
export default Email;
PASSWORD.JS
import React from 'react'
const App = () => {
let password = '';
return (
<button onClick ={()=>props.getData({password})}></button>
);
}
export default Password;
BUTTON.JS

Answer 1

I have created a solution and a sandbox for the same.
App.js
import React, { useState } from "react";
import Email from "./components/Email";
import Password from "./components/Password";
import Button from "./components/Button";
const App = () => {
const [email, setEmail] = useState("");
const [password, setpassword] = useState("");
const [submit, setSubmit] = useState(false);
if (submit) {
console.log("email ", email);
console.log("password ", password);
}
return (
<div>
<Email setEmail={setEmail} />
<Password setpassword={setpassword} />
<Button setSubmit={setSubmit} />
</div>
);
};
export default App;
Password.js
import React from "react";
const Password = ({ setpassword, submit }) => {
return (
<>
Get Password
<input type="password" onChange={e => setpassword(e.target.value)} />
</>
);
};
export default Password;
Email.js
import React from "react";
const Email = ({ setEmail }) => {
return (
<>
Get Email
<input type="text" onChange={e => setEmail(e.target.value)} />
</>
);
};
export default Email;
Button.js
import React from "react";
const Button = ({ setSubmit }) => {
return (
<button
onClick={() => {
setSubmit(true);
}}
>
Submit
</button>
);
};
export default Button;
I would strongly suggest you go to reactjs.org and go through the documents before starting any course. Please don't copy paste. I hope it helps.