无法访问 React js 组件的传递值

Question

I'm fairly new to react and i would like to know why i can't access my props that are passed down.

In my StatContentBet.js Component, i cannot access the props object values which i passed down from StatContent.js.

I can access this.props.img, but not this.props.bet.img, even though this.props.bet is a valid object.

https://gyazo.com/52347142134362b9cc4b7112c18ceaaf

Here is my StatContentBet.js (Where i'm trying to call the passed down from)

    import React from "react";
import MiniDice from "./MiniDice";
class StatsContentBet extends React.Component {

  render() {

    return (
        <div className="statsConentBet">
          <div className="betInfo">
            <img
              className="betInfo-userImg"
              src={this.props.img}
            />
            <span className="betInfo-username">Richard Henricks</span>
            <div className="betInfo-dices">
              {this.props.betChoices.map((betChoice, index) => {
                console.log(betChoice)
              })}
            </div>
          </div>
        </div>
    );
  }
}

export default StatsContentBet;

StatContent.js (Where i'm calling the

import React, { Component } from "react";
import StatContentBet from "./StatsContentBet";

class StatContent extends Component {
    constructor() {
        super(); 
        this.state = {

        };
    }    



    render() { 
       let bets =  [{
            id:1,
            username:"test",
            img: "https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg",
            diceChoices: [1,2,3,4,5,6,1]
        },{
            id:2,
            username:"test",
            img: "https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg",
            diceChoices: [1,2,3,4,5,6,1]
        },{
            id:3,
            username:"test",
            img: "https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg",
            diceChoices: [1,2,3,4,5,6,1]
        },{
            id:4,
            username:"test",
            img: "https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg",
            diceChoices: [1,2,3,4,5,6,1]
        }]

        return (
            <div id="statsContentContent">
                {/* <StatContentBet img='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg' /> */}
                {bets.map((bet, i) => 
                    <StatContentBet 
                        key={i} 
                        betChoices={bet.diceChoices} 
                        bet={bet} 
                        img={bet.img} 
                    />
                )}

            </div>
        )
    }
}

export default StatContent;

All the help is greatly appreciated!

Answer 1

It's working fine for me https://jsfiddle.net/hawk939393/19a7bgxL/4/ ; I'm not getting any errors related to undefined .

Ps you just have a typo in a component name StatContentBet -> StatsContentBet

Edit: Make the following change inside your InputDices component:

 StatsContentBet betChoices={[]}></StatsContentBet>

or you can check inside StatsContentBet whether this.props.betChoices is defined: if defined return jsx, else return something else return null