Lifting State Up: The Mirror

import React, { useState } from 'react';

// 1. Move the state here so both children can access it
export default function App() {
  return (
    <div style={{ padding: '20px', textAlign: 'center', fontFamily: 'sans-serif' }}>
      <h1>Text Synchronizer</h1>
      <div style={{ border: '1px solid #ddd', padding: '20px', borderRadius: '8px' }}>
        <InputComponent />
        <hr />
        <DisplayComponent />
      </div>
    </div>
  );
}

function InputComponent() {
  // Remove the state from here
  const [value, setValue] = useState("");

  return (
    <div>
      <label>Type something: </label>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
}

function DisplayComponent() {
  // 2. This component should receive the text through props
  return (
    <div style={{ marginTop: '20px' }}>
      <h3>Live result:</h3>
      <p style={{ color: 'blue', fontSize: '1.5rem' }}>
        {/* Show the text here */}
        ...
      </p>
    </div>
  );
}