React: Getting Content from State Array Element

Question

I was experimenting with React State where one of the states is an array and I am trying to access one of the individual array elements. I found the line below problematic:

const Character = this.state.Characters[0];

If I use the above line in the code below, React would return error, however if I use:

const Character = somedefinedarray[0];

The below codes would work, but I could not see the difference for the two lines above at all. Can anyone enlighten me somehow? Might it be something related to "this" or state array access or so???

class Ch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Characters: []
        }
    }
    componentDidMount() {
        this.setState({Characters: somedefinedarray});
    }
    render() {
        const Character = this.state.Characters[0];
        return (
            <p>{Character.somestate}</p>
        )
    }
}

Nisanth Reddy · Accepted Answer · 2021-05-14 17:15:15Z

1

During your first render, your default state is Characters: [].

So, when you access Character = this.state.Characters[0];, Character will be undefined because your state array is empty.

Then, you try to use Character.somestate which will result in an error saying, cannot read property somestate of undefined.

answered May 14, 2021 at 17:15

Nisanth Reddy

6,4801 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nisanth Reddy Over a year ago

@BhojendraRauniyar accessing a non existent index of an array doesn't throw an error. It just returns undefined.

Collectives™ on Stack Overflow

React: Getting Content from State Array Element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related