No tengo idea de por qué recibo este error, creo que la lógica está bien.
matchData[0] contiene esta información:
{ players: ["Disguised Lizard", "DrSpiteful"], winner: "DrSpiteful", scoreDifference: 1 }Aquí está la lógica que contiene información de Match(props):
import React from 'react'; import Match from './Match'; import matchData from '../data/matchData'; function MatchList(props) { const oneMatch = matchData[0]; console.log(oneMatch); return ( <section className="PlayerList MatchList"> <h1>Match list</h1> <Match players={oneMatch.players} winner={oneMatch.winner} scoreDifference={oneMatch.scoreDifference} /> </section> ); } export default MatchList; Tengo un problema con esta línea de {props.players[0]} <span>vs</span> {props.players[1]} extraída del siguiente código:
import React from 'react'; function Match(props) { return ( <article className="Match"> <h1> {props.players[0]} <span>vs</span> {props.players[1]} </h1> {/* To be shown when there is a winner */} <h2> {props.winner} is the winner by {props.scoreDifference}! </h2> {/* To be shown when there is no winner */} <h2>No winners yet!</h2> </article> ); } export default Match;¿Alguien puede señalarme qué estoy haciendo mal? Sinceramente, no veo el problema.
Puedes probar este código. Espero que este código te ayude.
props[players][0]*** EDITAR: he decidido no acceder a los datos directamente con el índice y en su lugar usé un bucle ***
Parece que hay un problema con React.
cuando registro en la consola
{console.log(props.players[0])} <span>vs</span> {console.log(props.players[1])}Devuelve la información adecuada:
Lagarto disfrazado vs DrSpiteful
Sin embargo, mi aplicación de reacción simplemente falla y dice:
Match.js:6 Uncaught TypeError: Cannot read properties of undefined (reading '0')Espero que funcione. {accesorios.jugadores.longitud == 0 ? "" : props.players[0]} vs {props.players.length == 0 ? "" : accesorios.jugadores[1]}