App.js
import './App.css'; // Estilos propios del componente import Tarjeta from './componentes/Tarjeta'; // Importo la tarjeta function App() { // Devuelvo un div con las tarjetas que quiera // la Tarjeta tiene unas propiedades que se pasan al componente // Pasamos el nombre y la url de la imagen return ( <div className="App"> <h1>¿Quien descubrió el radio?</h1> <Tarjeta nombre="Einstein" correcta="Marie Curie" /> <Tarjeta nombre="Marie Curie" correcta="Marie Curie"/> <Tarjeta nombre="Schrodinger" correcta="Marie Curie"/> </div> ); } export default App;
Tarjeta.js
import Foto from './Foto'; // Importo Foto import Cabecera from './Cabecera'; // Importo Cabecera // Tarjeta le paso las propiedades nombre y url // Esto va dentro de props pero uso destructuring function Tarjeta({nombre, correcta}) { // En el div es donde pongo la clase, porque es elemento html // Uso los componentes Cabecera y Foto return ( <div className="tarjeta"> <Cabecera nombre={nombre} correcta={correcta}/> <Foto descripcion={nombre}/> </div> ) } export default Tarjeta;
Cabecera.js
const comprobar = (objeto, correcta) => { console.log("Has pinchado en " + objeto.innerHTML) if (objeto.innerHTML === correcta) { objeto.innerHTML = "Muy BIEN" } else { objeto.innerHTML = "INCORRECTO" } } function Cabecera({ nombre, correcta }) { return <h1 onClick={(event) => { comprobar(event.target, correcta) }} >{nombre}</h1>; } export default Cabecera;