Uncaught TypeError: Cannot read properties of undefined (reading '0')-CodePudding

I have no clue why I am getting this error, I believe the logic is fine.

matchData[0] contains this information:

{    players: ["Disguised Lizard", "DrSpiteful"],
    winner: "DrSpiteful",
    scoreDifference: 1
}

Here's the logic containing Match(props) info:

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;

I am getting an issue with this line of {props.players[0]} <span>vs</span> {props.players[1]} extracted from the code below:

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;

Can anyone point out to me what I am doing wrong, I honestly don't see the issue.

CodePudding user response：

you can try this code. I hope this code will help you.

props[players][0]

CodePudding user response：

There seems to be an issue with React.

when I console log

{console.log(props.players[0])} <span>vs</span> {console.log(props.players[1])}

It returns the appropriate information:

Disguised Lizard vs DrSpiteful

However, my react app just crashes and says:

Match.js:6 Uncaught TypeError: Cannot read properties of undefined (reading '0')