import React, { useState } from 'react';

// 1. Mueve el estado aquí para que ambos hijos puedan acceder
export default function App() {
  return (
    <div style={{ padding: '20px', textAlign: 'center', fontFamily: 'sans-serif' }}>
      <h1>Sincronizador de Texto</h1>
      <div style={{ border: '1px solid #ddd', padding: '20px', borderRadius: '8px' }}>
        <InputComponent />
        <hr />
        <DisplayComponent />
      </div>
    </div>
  );
}

function InputComponent() {
  // ❌ Quita el estado de aquí
  const [valor, setValor] = useState("");

  return (
    <div>
      <label>Escribe algo: </label>
      <input 
        type="text" 
        value={valor}
        onChange={(e) => setValor(e.target.value)}
      />
    </div>
  );
}

function DisplayComponent() {
  // 2. Este componente debería recibir el texto por props
  return (
    <div style={{ marginTop: '20px' }}>
      <h3>Resultado en tiempo real:</h3>
      <p style={{ color: 'blue', fontSize: '1.5rem' }}>
        {/* Muestra el texto aquí */}
        ...
      </p>
    </div>
  );
}
Terminal
Ready

Waiting for execution...