Why am I getting a TypeError: Cannot read property 'map' of undefined

Question

I'm new to react and I'm facing this issue.

Here's my code:

import React, { Fragment } from 'react'
import Carousel from '@brainhubeu/react-carousel'
import Modal from 'react-responsive-modal'

class ReactCarousel extends React.Component {

     constructor () {
        super()
        this.state = {
          isOpen: false
        }
        this.openModal = this.openModal.bind(this)
      }

    openModal (id) {
        this.setState({
           isOpen: {
              [id]: true
           }
        });
     }

    state = {
        images : [
            { 
                id: 1,
                url: '/img/covers/01.erikssonfurunes.png', 
                fullWidthImgURL: '/img/full/01.erikssonfurunes_full.jpeg',
                client: 'Eriksson Furunes',
                type: 'Wordpress Development' 
            },
            {
                id: 2,
                url: '/img/covers/02.bruce_fordyce_after_party.png',
                fullWidthImgURL: '/img/full/02.bruce_fordyce_after_party_full.jpg',
                client: 'Bruce Fordyce After Party',
                type: 'Facebook Cover Photo Design' 
            },
            { 
                id: 3,
                url: '/img/covers/03.crmworks_asia.png',
                fullWidthImgURL: '/img/full/03.crmworks_asia_full.jpg',
                client: 'CRMWorks ASIA',
                type: 'Design & Joomla Development' 
            },
            { 
                id: 4,
                url: '/img/covers/04.devtac.png',
                fullWidthImgURL: '/img/full/04.devtac_full.jpg',
                client: 'DEVTac',
                type: 'Logo Design' 
            },
            { 
                id: 5,
                url: '/img/covers/05.direwolf.png',
                fullWidthImgURL: '/img/full/05.direwolf_full.jpg',
                client: 'Direwolf',
                type: 'Illustration' 
            },
            { 
                id: 6,
                url: '/img/covers/06.intechsive_software_development.png',
                fullWidthImgURL: '/img/full/06.intechsive_software_development_full.jpg',
                client: 'Intechsive Software Development',
                type: 'Web Design' 
            },
            { 
                id: 7,
                url: '/img/covers/07.talbase.png',
                fullWidthImgURL: '/img/full/07.talbase_dashboard_consultant_full.jpg',
                client: 'Talbase',
                type: 'UI Design' 
            }
        ]
    };

    onCloseModal = () => {
        this.setState({ open: false });
    };

    render() {
        return (
            <Fragment>
                <div className="carousel">
                    <Carousel
                        slidesPerScroll={2}
                        slidesPerPage={2}
                        infinite
                        animationSpeed={5000}
                        arrowLeft={<i className="fi-xwllxl-chevron-wide"></i>}
                        arrowRight={<i className="fi-xwlrxl-chevron-wide"></i>}
                        addArrowClickHandler
                        keepDirectionWhenDragging
                        clickToChange
                        breakpoints={{
                        1280: { 
                            slidesPerPage: 2,
                            slidesPerScroll: 2
                        },
                        1024: {
                            slidesPerPage: 1,
                            slidesPerScroll: 1,
                        },
                    }}
                >
                    {this.state.images.map(({ id, url, fullWidthImgURL, client, type }) => (
                    <div key={id}> 
                        <a className="pr-0 pl-16" onClick= {this.openModal.bind(this, id)}>
                            <img src={url} className="coral-red-shadow" alt={client + " | " + type} />
                            <h1 className="mt-6 client-heading fade-in">{client}</h1>
                            <p className="fade-in">{type}</p>
                        </a>    
                        <Modal isOpen={this.state.isOpen[id]}>
                            <img src={fullWidthImgURL} alt={client + " | " + type} />
                        </Modal> 
                    </div>          
                    ))}
                    </Carousel>   
                </div>     
            </Fragment>
        )
    }
}

export default ReactCarousel

I'm using this package: https://www.npmjs.com/package/react-responsive-modal

Any help is much appreciated.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sed arcu vitae pharetra. Morbi egestas lorem nec ante gravida, ut congue enim cursus. Quisque ex magna, aliquet sit amet turpis sed, dapibus sodales orci. Cras molestie massa a mattis venenatis. Quisque varius tortor a enim sodales semper. Mauris at felis dui. Nulla facilisi. Donec ultricies eu nisl a aliquet.

Vivamus ut magna finibus neque interdum placerat sed non ligula. Nulla eget felis fermentum, sodales diam vel, bibendum sapien. Donec imperdiet magna eu nulla auctor scelerisque. Nam malesuada magna id eros placerat aliquet. Vivamus dignissim blandit turpis vitae sollicitudin. Donec fringilla, lacus ac iaculis rhoncus, ex dolor volutpat lectus, at finibus purus ipsum non ex. Proin tincidunt elit nec ex commodo iaculis. Nullam luctus auctor libero in laoreet. Cras luctus efficitur tellus, eleifend vehicula enim imperdiet sit amet. Pellentesque non purus ornare, sodales elit sed, vehicula augue.

Answer 1

defining the state attribute twice

You are removing data form the state because you define it twice. Once in the controller this.state = ... and once in the class state = { images....

chance your state to this

state = {
  isOpen: false,
  images: [...
}

And remove it from the controller.

Answer 2

You have to check if your object is not undefined like

array?.map()

here this.state.images?.map()

Hope this help.