Terms Must Be Accepted
ReactJS
Medium
5 views
Problem Description
Build a form that requires accepting terms before submit.
Output Format
Render a React component.
Constraints
Disable submit and show an error if terms are not checked.
Official Solution
import React, { useState } from 'react';
export default function App() {
const [accepted, setAccepted] = useState(false);
const [submitted, setSubmitted] = useState(false);
function submit(e) {
e.preventDefault();
setSubmitted(true);
if (!accepted) return;
alert('Submitted on meetcode');
}
const showError = submitted && !accepted;
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>meetcode terms</h2>
<form onSubmit={submit}>
<label style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
<input type='checkbox' checked={accepted} onChange={(e) => setAccepted(e.target.checked)} />
I accept the terms
</label>
{showError ? <div style={{ marginTop: 8, color: '#c1121f' }}>Please accept the terms to continue.</div> : null}
<button type='submit' style={{ marginTop: 12, padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff', opacity: accepted ? 1 : 0.6 }} disabled={!accepted}>
Continue
</button>
</form>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!