Estoy trabajando en un proyecto personal en el que se muestran los datos de la NFL por equipo. Estoy aprendiendo React y me gustaría saber cómo usar accesorios y direcciones URL de imágenes de mapa de una matriz para mostrar varias tarjetas con el logotipo de la NFL. Hice un sitio web similar usando estrictamente css, html y javascript, pero necesito hacerlo en reaccionar, de todos modos, esto es lo que tengo:
Inicio.js
import React from "react" import { Link} from "react-router-dom" import Box from '@material-ui/core/Box'; const teams = [ { id: 1, teamName: "Kansas City Cheifs", urlImage: "public/chiefs_logo.jpg" }, { id: 2, teamName: "Cincinatti Bengals", urlImage: "public/Bengals.jpg" }, { id: 3, teamName: "Denver Broncos", urlImage: "public/Denver-Broncos-symbol.jpeg" }, { id: 4, teamName: "Carolina Panthers", urlImage: "public/panthers.png" } ]; export default function Home(props) { return ( <div className="Team-Box"> const teamCards = teams.map(team => ) <Box className="Box" key={teams.id} background-image={props.urlImage}/> <Box className="Box" background-image={props.urlImage}/> <Link to="/Home"></Link> </div> ) }[Cómo quiero que se vea][2]
[2]: https://i.stack.imgur.com/KK0tw.jpg , excepto los 32 equipos de la NFL
Dentro de tu devolución quieres algo como esto.
return ( <div> {teams.map((team) => ( <div key={team.id} className='Team-Box'> <Box className='Box' style={{ backgroundImage: `url(${team.imageUrl})` }} /> </div> ))} <Link to='/Home'></Link> </div> );Esta es una idea de cómo se vería esto si quisiera pasar algunos datos como accesorios a un componente de tarjeta responsable de mostrar la información de cada equipo.
import { useState } from 'react'; const initialTeams = [ { id: 1, teamName: 'Kansas City Chiefs', urlImage: 'public/chiefs_logo.jpg', }, { id: 2, teamName: 'Cincinatti Bengals', urlImage: 'public/Bengals.jpg', }, { id: 3, teamName: 'Denver Broncos', urlImage: 'public/Denver-Broncos-symbol.jpeg', }, { id: 4, teamName: 'Carolina Panthers', urlImage: 'public/panthers.png', }, ]; const Card = ({ imageUrl, teamName }) => ( <div className='team-card' style={{ backgroundImage: `url(${imageUrl})` }}> {teamName} </div> ); const Home = () => { const [teams, setTeams] = useState(initialTeams); return ( <div> {teams.map(({ id, imageUrl, teamName }) => ( <Card key={id} imageUrl={imageUrl} teamName={teamName} /> ))} </div> ); }; export default Home;