Array contents not rendering in ReactJS

Question

I am still fairly new to React. I am trying to map the contents of an array in ReactJS. Currently, I am having no results render. Here is the section of code I am using to map the array contents:

return (
        <div>
            {this.state.errors.map( (error, index) => 
                <div key={index} className="alert alert-danger" role="alert">
                    {error}
                </div>
            )}
        </div>
       )

Here is how I am initializing the state:

this.state = {
    workoutId:'',
    daysOfWeek:[],
    name:'',
    trainingPlan:'',
    errors: []
}

And here is where I am populating the errors array:

if(this.state.daysOfWeek.length < 1) {
    this.state.errors.push('Must select at least 1 day to perform workout');
}
if(this.state.workoutId === '') {
    this.state.errors.push('Please select a workout to edit');
}

console.log(this.state.errors);

I am seeing that the array is being populated with those strings on the console.log. My understanding of React is that the component will re-render itself when changes are made. Is that correct? Anyway, can someone explain to me why my array contents will not render? I have tried mapping based on if the length of the errors array is greater than 0, which did not work either.

reactjs.org/docs/react-component.html#setstate

skylerfenn
– skylerfenn

2018-08-12 18:25:27 +00:00
Commented Aug 12, 2018 at 18:25 — skylerfenn
– skylerfenn, Commented Aug 12, 2018 at 18:25
You can’t manipulate the state object directly.

skylerfenn
– skylerfenn

2018-08-12 18:26:22 +00:00
Commented Aug 12, 2018 at 18:26 — skylerfenn
– skylerfenn, Commented Aug 12, 2018 at 18:26

Alexander van Oostenrijk · Accepted Answer · 2018-08-12 18:28:47Z

4

In React, you must never assign to this.state directly. Use this.setState() instead. The reason is that otherwise React would not know you had changed the state.

The only exception to this rule where you assign directly to this.state is in your component's constructor.

answered Aug 12, 2018 at 18:28

Alexander van Oostenrijk

4,7843 gold badges25 silver badges37 bronze badges

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

2 Comments

Nick D Over a year ago

ahh I see. So instead, I should push those to a locally declared array, then assign that array to my errors array using setState

Alexander van Oostenrijk Over a year ago

That's exactly right. let errors = ...; this.setState({errors:errors}). You don't need to include all the other state properties again, only what you're changing.

T.J. Crowder · Accepted Answer · 2018-08-12 18:46:49Z

You cannot modify your state object or any of the objects it contains directly; you must instead use setState. And when you're setting state based on existing state, you must use the callback version of it; details.

So in your case, if you want to add to the existing this.state.errors array, then:

let errors = [];
if(this.state.daysOfWeek.length < 1) {
    errors.push('Must select at least 1 day to perform workout');
}
if(this.state.workoutId === '') {
    errors.push('Please select a workout to edit');
}
if (errors.length) {
    this.setState(prevState => ({errors: [...prevState.errors, ...errors]}));
}

If you want to replace the this.state.errors array, you don't need the callback form:

let errors = [];
if(this.state.daysOfWeek.length < 1) {
    errors.push('Must select at least 1 day to perform workout');
}
if(this.state.workoutId === '') {
    errors.push('Please select a workout to edit');
}
if (errors.length) { // Or maybe you don't want this check and want to
                     // set it anyway, to clear existing errors
    this.setState({errors});
}

Collectives™ on Stack Overflow

Array contents not rendering in ReactJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related