screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> const { useState } = React; function App() { const [fields, setFields] = useState([{ name: '', email: '' }]); const addField = () => { setFields([...fields, { name: '', email: '' }]); }; const removeField = (index) => { const updatedFields = [...fields]; updatedFields.splice(index, 1); setFields(updatedFields); }; const handleChange = (index, field, value) => { const updatedFields = [...fields]; updatedFields[index][field] = value; setFields(updatedFields); }; return ( <div className='container'> <h3>React Js Dynamically Add Remove Input Field</h3> {fields.map((field, index) => ( <div key={index} className="field-wrapper"> <input type="text" placeholder="Name" value={field.name} onChange={(e) => handleChange(index, 'name', e.target.value)} /> <input type="email" placeholder="Email" value={field.email} onChange={(e) => handleChange(index, 'email', e.target.value)} /> <button onClick={() => removeField(index)}>Remove</button> </div> ))} <button onClick={addField} className="add-button"> Add Field </button> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script> <style> * { box-sizing: border-box; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .container { margin: 0 auto; width: 600px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); padding: 20px; display: flex; align-items: center; flex-direction: column } .field-wrapper { display: flex; margin-bottom: 10px; } input[type="text"], input[type="email"] { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; } button { padding: 8px 16px; background-color: #4caf50; border: none; border-radius: 3px; color: #fff; cursor: pointer; font-size: 14px; } button.add-button { background-color: #2196f3; } button.add-button:hover, button.remove-button:hover { opacity: 0.8; } </style> </body> </html>