'React - Cannot read properties of undefined (reading 'map')

I am building my first own Mern stack.

I have a dropdown menu with an array of menu points called lis, a video-array with three objects, an array of themes.

Now I writing my edit-component and no matter what I do, it doesn't read my videos.

I try to map over the videos but I get the error above.

The data is there, I know because they are shortly displayed, before this error is shown in the console.

Here is my edit-component:

    const DropdownRessortEdit = () => {
        const dispatch = useDispatch();
       
        const {dropdownRessort, isLoading, isError, message} = useSelector((state)=>state.dropdownRessort);
        const { id } = useParams();
    
        useEffect(()=>{
            if(isError){
                window.alert(message);
            }
            if(id){
                dispatch(getDropdownRessort(id));
                console.log({...dropdownRessort});
                setData({...dropdownRessort})
            }
                return ()=>{
                    dispatch(reset());
                }
            
        }, [dispatch, isError, message, id, dropdownRessort]);
    
        const [data, setData] = useState({
            lis: [],
            videos:[
                    {
                        iframe:"",
                        ressort:"",
                        theme:"",
                        title:"",
                    },
                    {
                        iframe:"",
                        ressort:"",
                        theme:"",
                        title:"",
                    },
                    {
                        iframe:"",
                        ressort:"",
                        theme:"",
                        title:"",
                    }, 
            ],
            themen:[],
    
        })
        const {lis, videos, themen} = data;
    
       
    
      console.log(data);
        const updateData = (e)=>{
            setData((prevState)=>({
                ...prevState,
                [e.target.name]: e.target.value,
              }))
            // return setData((prevState) =>{
            //     return { ...prevState,
            //     ...value}
                
            // })
        }
        const onSubmit = (e)=>{
            e.preventDefault();
            const updateDropdownRessortData = {
                lis,
                videos,
                themen,
            }
            dispatch(updateDropdownRessort(updateDropdownRessortData));
        }
        if(isLoading){
            return <Spinner/>
        }
      return (
       
        <Container>
            <Navbar/>
            <TitleHolder>
                <Title>Update DropdownRessort</Title>
            </TitleHolder>
            <ContentHolder>
                {data ? 
                <UpdateForm onSubmit={onSubmit} encType="multipart/form-data">
                <section className="menupoints">
                      <Label htmlFor="lis_ressorts">Menüpunkte Ressorts</Label>
                      <Input type="text" name="lis_ressorts" id="lis_ressorts" value={lis} onChange={updateData}/>
                    </section>
                    <VideoWrapper>
                        <DataHolder>
                            {videos.map((video, index)=>(
                                <div key={index}>
                                    <VideoSection>
                                        <FormGroup>
                                            <Label htmlFor={`ressortvideo_ + ${index} + _iframe`}>{`Video ${index}`}</Label>
                                            <Input type="text" name={`ressortvideo_ + ${index} + _iframe`} id={`ressortvideo_ + ${index} + _iframe`}
                                            style={{background:"var(--blue)", color:"var(--white)"}}
                                            value={video.iframe}  onChange={updateData}/>
                                        </FormGroup>
                                        <FormGroup>
                                            <Label htmlFor={`ressortvideo_ + ${index} + _ressort`}>{`Video ${index} Ressortzuordnung`}</Label>
                                            <Input type="text" name={`ressortvideo_ + ${index} + _ressort`} id={`ressortvideo_ + ${index} + _ressort`} value={videos.ressort} onChange={updateData}/>
                                        </FormGroup>
                                        <FormGroup>
                                            <Label htmlFor={`ressortvideo_ + ${index} + _theme`}>{`Video ${index} Themenzuordnung`}</Label>
                                            <Input type="text" name={`ressortvideo_ + ${index} + _theme`} id={`ressortvideo_ + ${index} + _theme`}  value={video.theme} onChange={updateData}/>
                                        </FormGroup>
                                        <FormGroup>
                                            <Label htmlFor={`ressortvideo_ + ${index} + _title`}>{`Video ${index} Titelzuordnung`}</Label>
                                            <Input type="text" name={`ressortvideo_ + ${index} + _title`} id={`ressortvideo_ + ${index} + _title`}  value={video.title} onChange={updateData}/>
                                        </FormGroup>
                                    </VideoSection>
                                </div>
                            ))}
                            </DataHolder>  
                    </VideoWrapper>
                    <section className="themen">
                      <Label htmlFor="themen_ressorts">Themen</Label>
                      <Input type="text" name="themen_ressorts" id="themen_ressorts" value={themen} onChange={updateData}/>
                    </section>
                            <ButtonHolder>
                                <UpdateButton type="submit">Update</UpdateButton>
                            </ButtonHolder> 
     
                </UpdateForm>
                : null}
            </ContentHolder>
            <Footer/>
        </Container>
      )
    }
    
    export default DropdownRessortEdit

Thanks for help.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source