Confirm Password Basic
ReactJS
Hard
5 views
Problem Description
Create a sign-up form that checks password and confirm password match.
Output Format
Render a React component.
Constraints
Validate on submit and show a helpful message.
Official Solution
import React, { useState } from 'react';
export default function App() {
const [pw, setPw] = useState('');
const [confirm, setConfirm] = useState('');
const [msg, setMsg] = useState('');
function submit(e) {
e.preventDefault();
if (!pw || !confirm) {
setMsg('Fill both fields');
return;
}
if (pw !== confirm) {
setMsg('Passwords do not match');
return;
}
setMsg('Account created on meetcode.');
}
return (
<div style={{ padding: 16, width: 420 }}>
<h2 style={{ marginTop: 0 }}>meetcode sign up</h2>
<form onSubmit={submit} style={{ display: 'grid', gap: 10 }}>
<input type='password' value={pw} onChange={(e) => setPw(e.target.value)} placeholder='Password' style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
<input type='password' value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder='Confirm password' style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
<button type='submit' style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Create</button>
</form>
{msg ? <div style={{ marginTop: 10, color: msg.includes('created') ? '#0b5' : '#c1121f' }}>{msg}</div> : null}
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!