'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 |
|---|
