Отображение введённого текста из полей ввода

Условие

Необходимо вывести в интерфейс значения, которые пользователь вводит в два поля — одно из них должно быть реализовано как контролируемый компонент, а другое — как неконтролируемый. При нажатии на кнопку «Submit» текущие данные из обоих input‑ов должны отобразиться где‑то на странице.

 export default function App() {
    return {
    <div className="App">
    </form>
    <input placeholder="compiled" />
    <input placeholder="uncompiled" />
    <button>Submit</button>
    </form>
    </div>
};

Подсказка: для контролируемого input следует хранить его значение в состоянии компонента и обновлять его через обработчик onChange, а для неконтролируемого — использовать реф или напрямую обращаться к DOM‑элементу.

Ответ

Controlled-поле хранит значение в state, uncontrolled читается через ref при submit. Результат отправки сохраните отдельно, чтобы показать его на странице.

function App() {
  const [value, setValue] = React.useState('');
  const other = React.useRef(null);
  const [submitted, setSubmitted] = React.useState(null);
  function submit(event) {
    event.preventDefault();
    setSubmitted({ first: value, second: other.current.value });
  }
  return <div><form onSubmit={submit}>
    <label>Controlled <input value={value} onChange={e => setValue(e.target.value)} /></label>
    <label>Uncontrolled <input ref={other} defaultValue='' /></label>
    <button>Submit</button>
  </form>
    {submitted && <p>{submitted.first} / {submitted.second}</p>}
  </div>;
}

JSX выводит значения как текст. Для показа пользовательского ввода не нужны innerHTML или dangerouslySetInnerHTML.