How to fix "TypeError: posters[0] is undefined" in react render?

Question

In my function I can map through my list from the state but when I want to map in render it doesn't work

class DesktopList extends Component {
    constructor(props) {        
        super(props);
        this.state = {
            items: [
                "https://images-na.ssl-images-amazon.com/images/S/cmx-images-prod/Item/765356/765356._SX1280_QL80_TTD_.jpg",
                "https://images-na.ssl-images-amazon.com/images/S/cmx-images-prod/Item/232863/232863._SX1280_QL80_TTD_.jpg",
                "https://images-na.ssl-images-amazon.com/images/S/cmx-images-prod/Item/779028/779028._SX1280_QL80_TTD_.jpg",
                "https://images-na.ssl-images-amazon.com/images/S/cmx-images-prod/Item/765281/765281._SX1280_QL80_TTD_.jpg",
                "https://images-na.ssl-images-amazon.com/images/S/cmx-images-prod/Item/495991/495991._SX1280_QL80_TTD_.jpg",
                "https://images-na.ssl-images-amazon.com/images/S/cmx-images-prod/Item/694446/694446._SX1280_QL80_TTD_.jpg",
                "https://images-na.ssl-images-amazon.com/images/S/cmx-images-prod/Item/460929/460929._SX1280_QL80_TTD_.jpg",
                "https://images-na.ssl-images-amazon.com/images/S/cmx-images-prod/Item/755543/755543._SX1280_QL80_TTD_.jpg",
                "https://images-na.ssl-images-amazon.com/images/S/cmx-images-prod/Item/756917/756917._SX1280_QL80_TTD_.jpg",
            ],
            posters: []
        }
    }

sortIntoArray = () => {
        let posterImages = [...this.state.items];
        const size = 5;

        const result = this.state.posters;
        for (var i=0;i<posterImages.length;i+=size)
        result.push( posterImages.slice(i,i+size) )
        this.setState({posters: result})
        let images = this.state.posters

        images[0].map(item => console.log(item.poster))
    }

render() {
        let {posters} = this.state;
        let poster = posters[0].map((item, index) => 
        <img src={item.poster} alt="poster" style={style.poster} key={index}/>
        )

return (
                <div 
                 style={style.posterList} className="posterlist">
                    {poster}
                </div>
          );
    }
}

I want every poster to show from the first array

this is what I get

TypeError: posters[0] is undefined

What does the structure of `posters` look like? `posters[0]` being undefined means that `posters` is likely an empty list. — brandonwang, Jul 15 '19 at 17:24
I don't think it's empty because if I change posters[0] to posters it output the two arrays that's in posters but I only want to show the array with index 0and that's when it says it's undefined. — Jonon, Jul 15 '19 at 18:02
@Jonon you're falling into the second trap of JS, the console, [which shows values that weren't really available when first logged](https://stackoverflow.com/q/17546953/1218980). — Emile Bergeron, Jul 15 '19 at 18:09
So it's not actually there? but what should I think because the array.map actually output the two arrays. It's just when I try to chose index it can't. I'm confused. — Jonon, Jul 15 '19 at 18:27
We would need a [mcve] to be able to spot the underlying problem. — Emile Bergeron, Jul 15 '19 at 18:31
I fixed the problem. Instead of using posters[0] I hade to put the index in quotes. It works but I don't really understand why — Jonon, Jul 18 '19 at 16:52

agfc · Answer 1 · 2019-07-15T18:01:37.143

-1

Before you do let {posters} = this.state; you need to call your sortIntoArray(), which you don't. You need to make sure that the values you're assigning from are populated (be it the state or anything else). However, from your code state.posters is undefined hence your variable posters is undefined.

It's hard to give you an exact recipe for it depends on the entirety of your component.

edited Jul 15 '19 at 18:01

answered Jul 15 '19 at 17:28

agfc

852
1
6
13

Even if called before, the `setState` function is async, so it'll still fail with `posters[0] is undefined`. – Emile Bergeron Jul 15 '19 at 17:30
It depends on where you call it from. If it's called on ComponentDidRender, Render will get called after the state is updated and it will not fail. – agfc Jul 15 '19 at 17:33
`ComponentDidRender` doesn't even exists. – Emile Bergeron Jul 15 '19 at 17:40
I meant componentDidMount. – agfc Jul 15 '19 at 17:43
Same problem, [`componentDidMount` is called after `render`](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/). – Emile Bergeron Jul 15 '19 at 17:45
You are correct. But it doesn't matter in the context of the question. They need to make sure that their state is populated before they use it. How they do that is up to them. They can ask another question.... – agfc Jul 15 '19 at 17:56
OP needs to make sure that his render function works when `posters` is an empty array, regardless of when the state or the data itself is available. – Emile Bergeron Jul 15 '19 at 18:07

How to fix "TypeError: posters[0] is undefined" in react render?

1 Answers1