scrimba
Frontend Career Path
React basics
Meme generator
Sign up form practice
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

AboutCommentsNotes
Sign up form practice
Expand for more info
App.js
run
preview
console
import React from "react"

export default function App() {

/**
* Challenge: Connect the form to local state
*
* 1. Create a state object to store the 4 values we need to save.
* 2. Create a single handleChange function that can
* manage the state of all the inputs and set it up
* correctly
* 3. When the user clicks "Sign up", check if the
* password & confirmation match each other. If
* so, log "Successfully signed up" to the console.
* If not, log "passwords to not match" to the console.
* 4. Also when submitting the form, if the person checked
* the "newsletter" checkbox, log "Thanks for signing
* up for our newsletter!" to the console.
*/

function handleSubmit(event) {
event.preventDefault()
}

return (
<div className="form-container">
<form className="form" onSubmit={handleSubmit}>
<input
type="email"
placeholder="Email address"
className="form--input"
/>
<input
type="password"
placeholder="Password"
className="form--input"
/>
<input
type="password"
placeholder="Confirm password"
className="form--input"
/>

<div className="form--marketing">
<input
id="okayToEmail"
type="checkbox"

/>
<label htmlFor="okayToEmail">I want to join the newsletter</label>
</div>
<button
className="form--submit"
>
Sign up
</button>
</form>
</div>
)
}
Console
/index.html?
-8:26