Назад к задачам
Junior — Senior
5

Переключатель форм с очисткой ввода

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Необходимо реализовать очистку значения поля ввода при изменении состояния чекбокса. Когда галочка отмечена – отображается первая форма, когда снята – вторая. При переключении формы её содержимое должно сбрасываться.

import React from 'react';

export function App(props) {
    const [checked, setChecked] = React.useState(true);

    const onToggle = event => {
        setChecked(event.target.checked);
    };

    const FormOne = () => {
        return (
            <form>
                <label>Name 1</label>
                <input type='text' />
            </form>
        );
    };

    const FormTwo = () => {
        return (
            <form>
                <label>Name 2</label>
                <input type='text' />
            </form>
        );
    };

    const activeForm = checked ? <FormOne /> : <FormTwo />;

    return (
        <div className='App'>
            <div>
                <label>test</label>
                <input type='checkbox' checked={checked} onChange={onToggle} />
            </div>
            {activeForm}
        </div>
    );
}