function App() { const [formData, setFormData] = React.useState({ email: '', password: '', confirmPassword: '', newsletter: true, }) function changeName(event) { const { name, type, value, checked } = event.target setFormData((prevState) => { return { ...prevState, [name]: type === 'checkbox' ? checked : value, } }) } function handleSubmit(event) { event.preventDefault() if ( (formData.email !== '' && formData.password) === formData.confirmPassword ) { console.log('Successfully signed up') console.log(formData) if (formData.newsletter) { console.log('Thank you for signing up for the newsletter') } } else { console.log('Passwords do not match') } } return ( <form onSubmit={handleSubmit}> <input type='Email' placeholder='Email' onChange={changeName} name='email' value={formData.email} /> <br /> <br /> <input type='password' placeholder='Enter password' onChange={changeName} name='password' value={formData.password} /> <br /> <br /> <input type='password' placeholder='Confirm Password' onChange={changeName} name='confirmPassword' value={formData.confirmPassword} /> <br /> <br /> <input type='checkbox' id='newsletter' checked={formData.newsletter} onChange={changeName} name='newsletter' /> <label htmlFor='newsletter'> Yes please sign me up for the newsletter! </label> <br /> <br /> <button>Submit</button> </form> ) } export default App