import React, { useState } from 'react'; export default function App() { const [links, setLinks] = useState(['https://meetcode.in']); function setAt(i, value) { setLinks((prev) => prev.map((x, idx) => (idx === i ? value : x))); } function add() { setLinks((prev) => [...prev, '']); } function remove(i) { setLinks((prev) => prev.filter((_, idx) => idx !== i)); } return ( <div style={{ padding: 16, width: 520 }}> <h2 style={{ marginTop: 0 }}>meetcode links</h2> <div style={{ display: 'grid', gap: 10 }}> {links.map((value, i) => ( <div key={i} style={{ display: 'flex', gap: 10 }}> <input value={value} onChange={(e) => setAt(i, e.target.value)} placeholder='https://...' style={{ flex: 1, padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} /> <button type='button' onClick={() => remove(i)} disabled={links.length === 1} style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #ddd', background: '#fff', opacity: links.length === 1 ? 0.6 : 1 }}>Remove</button> </div> ))} </div> <button type='button' onClick={add} style={{ marginTop: 12, padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Add link</button> <pre style={{ marginTop: 12, background: '#f6f8fa', padding: 12, borderRadius: 14, overflowX: 'auto' }}>{JSON.stringify(links, null, 2)}</pre> </div> ); }