Why is my data not rendering from this.state?-CodePudding

I've been trying to get an array to come over into react and then display it on the browser. The data is coming over, but for some reason I cannot display it.

ReactJs:

import React, { Component } from "react";

export default class RegisterPage extends Component {
    constructor(props){
        super(props);
        this.state = {
            
        };

        this.getPlayers();
    }

    getPlayers() {
        fetch('/draft/get-players')
        .then((response) => response.json())
        .then((data) => {
            this.setState({
                players: data,
            });
        });
    }

    render(){
        return (<h1>{this.state.players[0].name}</h1>)
    }
}

I initially was trying to .map this into multiple lines of HTML, but through troubleshooting learned that I'm not even able to get a single element out of the array.

JSON from /draft/get-players:

[
    {
        "id": 1,
        "name": "Aidan Hutchinson",
        "position": "EDGE",
        "EstimatedRound": 1,
        "college": "Michigan",
        "age": "SR",
        "TakenRound": null,
        "TakenPick": null
    },
    {
        "id": 2,
        "name": "Aidan Hutchinson",
        "position": "EDGE",
        "EstimatedRound": 1,
        "college": "Michigan",
        "age": "SR",
        "TakenRound": null,
        "TakenPick": null
    },
    {
        "id": 3,
        "name": "Kayvon Thidobeaux",
        "position": "EDGE",
        "EstimatedRound": 1,
        "college": "Oregon",
        "age": "SOPH",
        "TakenRound": null,
        "TakenPick": null
    },
    {
        "id": 4,
        "name": "Kyle Hamilton",
        "position": "S",
        "EstimatedRound": 1,
        "college": "Notre Dame",
        "age": "JR",
        "TakenRound": null,
        "TakenPick": null
    },
    {
        "id": 5,
        "name": "Ikem Ekwonu",
        "position": "OL",
        "EstimatedRound": 1,
        "college": "NC State",
        "age": "SOPH",
        "TakenRound": null,
        "TakenPick": null
    }
]

CodePudding user response：

//you have not declared the array players just initialize the array first it will work

 this.state = {
              players:[]
           }

CodePudding user response：

I figured out the issue.

The page was rendering before the data was fetched, so when the page rendered it threw an error because 'this.state.players' was empty.

I fixed this by creating the element with the intial render knowing it would be empty, but when the state changes it updates to element. The element contains the JSX which will then render with my information.

Code:

import React, { Component } from "react";

export default class RegisterPage extends Component {
    constructor(props){
        super(props);
        this.state = {
            players:[],
         }

        this.getPlayers();
    }


    getPlayers() {
        fetch('/draft/get-players')
        .then((response) => response.json())
        .then((data) => {
            this.setState({
                players: data,
            });
        });
    }

    render(){
        let players = this.state.players.map((player)=>{
            return(
                <div>
                    {player.name}
                </div>
            );
        }
        );
        return (
            <div>
                {players}
            </div>)
    }
}

This SO thread helped me solve this. Create elements dynamically within React component