Редактирование тега появляющимся инпутом в React

Пусть у нас есть абзац с текстом:

function App() { const [value, setValue] = useState('text'); return <p> {value} </p>; }

Давайте сделаем так, чтобы по клику на абзац в нем появлялся инпут, с помощью которого можно будет поредактировать текст абзаца. После потери фокуса инпут должен убираться и в абзаце должен появится отредактированный текст.

Приступим к реализации. Для начала обернем текст абзаца в span:

function App() { const [value, setValue] = useState('text'); return <p> <span>{value}</span> </p>; }

Сделаем теперь стейт isEdit, который будет содержать состояние абзаца: если true, то абзац редактируется, а если false - то показывает текст.

Добавим описанный стейт:

function App() { const [value, setValue] = useState('text'); const [isEdit, setIsEdit] = useState(false); return <p> <span>{value}</span> </p>; }

Теперь сделаем так, чтобы в режиме показа в абзаце показывался span в текстом из стейта, а в режиме редактирования - инпут с текстом из стейта:

function App() { const [value, setValue] = useState('text'); const [isEdit, setIsEdit] = useState(false); let elem; if (!isEdit) { elem = <span>{value}</span>; } else { elem = <input value={value} />; } return <p> {elem} </p>; }

Сделаем теперь так, чтобы по клику на абзац он переходил в режим редактирования. Для этого добавим обработчик события к спену:

<span onClick={() => setIsEdit(true)}> {value} </span>;

Добавим теперь обработчик события onChange для инпута:

<input value={value} onChange={event => setValue(event.target.value)} />

А теперь сделаем так, чтобы по потери фокуса убирался режим редактирования и включался режим показа:

<input value={value} onChange={event => setValue(event.target.value)} onBlur={() => setIsEdit(false)} />

Соберем весь код вместе и получим решение нашей задачи:

function App() { const [value, setValue] = useState('text'); const [isEdit, setIsEdit] = useState(false); let elem; if (!isEdit) { elem = <span onClick={() => setIsEdit(true)}> {value} </span>; } else { elem = <input value={value} onChange={event => setValue(event.target.value)} onBlur={() => setIsEdit(false)} />; } return <p> {elem} </p>; }

Дан абзац и две кнопки. Пусть по клику на первую кнопку абзац переходит в режим редактирования, а по клику на вторую - в режим показа. Реализуйте описанное.