How to display data entered by the user in another textbox in React?

Question

How to display data entered by the user in another textbox in React?

Answer

You can achieve this using React’s useState hook to store and mirror the user’s input.

import { useState } from 'react';

function MirrorInput() {
  const [text, setText] = useState('');

  return (
    <div>
      <input
        type='text'
        value={text}
        placeholder='Type something...'
        onChange={(e) => setText(e.target.value)}
      />

      <input type='text' value={text} readOnly placeholder='Mirror input' />
    </div>
  );
}

Here, both inputs share the same state (text), so changes in one are reflected in the other.

Real-World Example

Useful for:

• Live preview fields
• Mirroring input for formatted display
• Form debugging tools

Quick Practice

Build a component that mirrors a user’s name input and displays a live greeting message below.

Summary

Use useState to store user input and mirror that state in any other UI element.