Skip to content

Instantly share code, notes, and snippets.

@rodcisal
Created July 16, 2020 00:57
Show Gist options
  • Save rodcisal/3dbdb879a392c79a771daa023a6f3359 to your computer and use it in GitHub Desktop.
Save rodcisal/3dbdb879a392c79a771daa023a6f3359 to your computer and use it in GitHub Desktop.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment