PadresEHijos.js

import React from 'react';

const hijos = [
  {
    nombre: 'Leonardo',
    edad: 33
  },
  {
    nombre: 'Rodrigo',
    edad: 32
  },
  {
    nombre: 'Mario',
    edad: 48
  }
];

function Hijo ({nombre, edadPadre, edad, reset}) {
  const diferencia = edadPadre - edad
  if (diferencia > 0) {
    return (
      <>
        <h1 style={{color: 'green'}}>{nombre} tiene {diferencia} con su padre</h1>
        <button type="button" onClick={reset}>Resetear</button>
      </>
    )
  }
  return null;
}

function Padre () {
  const [edad, setEdad] = React.useState(0);
  const reset = () => setEdad(0);
  return (
    <div>
      <label>
        Definir edad del padre
        <input type="number" placeholder="0" value={edad} onChange={(e) => setEdad(e.target.value)} />
      </label>
      <br />
      <br />
      <h1>
        El estado del padre es {edad}
      </h1>
      <div>
        {hijos.map(hijo => {
          return <Hijo nombre={hijo.nombre} edadPadre={edad} edad={hijo.edad} reset={reset} />
        })}
      </div>
    </div>
  )
}


function App() {

  return (
    <>
      <Padre />
    </>
  );
}

export default App;