Boton
const Boton = ({numero,llamada}) => {
{/* Llamo a la función que me pasan con el número del botón. Esto lo que hace es llamar
a la función del padre con el valor del botón que se ha pulsado
Estoy pasando información del hijo al padre */}
return <button onClick={()=>llamada(numero)} className="btn btn-info">{numero}</button>;
}
export default Boton;
App
import logo from './logo.svg';
import './App.css';
// Componente importado desde un archivo
import Despedida from './Despedida';
import Boton from './Boton';
import 'bootstrap/dist/css/bootstrap.min.css';
const generateRandomNumbers = () => {
const arr = Array.from({ length: 100 }, (_, i) => i + 1); // Números del 1 al 100
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]]; // Intercambiar elementos
}
return arr;
};
const getNumber=(numero)=>{
console.log(numero)
}
const saludo=(nombre)=>{
console.log(nombre)
console.log("Hola "+nombre+" que tal");
}
// Componente Más o menos una función que nos devuelve una mezcla de HTML y JS
function App() {
// Creo un array de nombres
const numeros=generateRandomNumbers();
return (
<div className="App">
{/* Paso al hijo una función para que se ejecute en un evento suyo */}
{numeros.map((numero,i)=>
<Boton numero={numero} key={i} llamada={getNumber}/>
)}
<Despedida nombre="Juan"/>
{/* Aquí llamo a la función sin parámetros y nos pasará el evento */}
<button onClick={saludo} >Pinchame</button>
{/* Aquí uso la función flecha para pasar un parámetro propio */}
<button onClick={()=>saludo("Ana")} >Pinchame</button>
</div>
);
}
// Exportamos APP (y lo renderizamos en index.js)
export default App;