import React, { useState } from 'react'; function Field({ label, id, value, onChange, type = 'text' }) { return ( <div style={{ display: 'grid', gap: 6 }}> <label htmlFor={id} style={{ fontWeight: 600 }}>{label}</label> <input id={id} type={type} value={value} onChange={(e) => onChange(e.target.value)} style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} /> </div> ); } export default function App() { const [email, setEmail] = useState(''); return ( <div style={{ padding: 16, width: 420 }}> <Field label='Email' id='email' type='email' value={email} onChange={setEmail} /> <div style={{ marginTop: 10, color: '#555' }}>Typing: {email}</div> </div> ); }