hi, i am coding a react app in the local system and i have this error,i tried to fix it but i don’t know why it doesn’t work,it shows the error "typeerror: cannot read proprety of undefined image,i created an array of the keys of items key in the state of the app(it’s a nested object) then i wanted as you see in the code to create a new array named composant in order to render it by injecting it in the jsx .
let a = this.state.items[x].image;
let b = this.state.items[x].title;
// etc.
i did change a and b and c as you said, i still have the same error
let etats = []
for(var propt in obj) {
etats.push(propt);
}
replace with
let etats = Object.keys(obj);
Also it’s quite hard to read code from screenshots.
actually i have already console loged the array “etats” and it have the two elements “item1” and “item2” as intended,i think something is wrong with the other part when i added the compenents to the “composant” array but i can’t figure out what is it.
i’am sorry, i taught that the screenshots are clear enough to read the code
class App extends React.Component {
constructor(props) {
super(props);
this.state={ firstButton:[false],
secondButton:false,
items: {
item1:{
image:"https://cdn.pixabay.com/photo/2017/05/12/08/30/typewriter-2306479_960_720.jpg",
title:"lorem ipsum",
text:"Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius."
},
item2:{
image:"https://cdn.pixabay.com/photo/2018/02/16/10/52/beverage-3157395_960_720.jpg",
title:"lorem gggg",
text:"Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent."
}
}
};
this.handleClick = this.handleClick.bind(this);
this.clickButton2 = this.clickButton2.bind(this);
console.log(this.state.firstButton);
}
componentDidMount(){
this.firstButtonRef=base.bindToState('items', {
context: this,
state: 'items'
});
}
componentWillUnmount(){
base.removeBinding(this.firstButtonRef)
}
handleClick(){
this.setState({firstButton:[true]});
}
clickButton2(){
this.setState({ secondButton:true});
}
render() {
let obj = this.state.items;
let etats=[];
for(var propt in obj){
etats.push(propt);
}
let i = 0;
let composant=[];
let x;
while(i < etats.length){
x= etats[i];
console.log(x);
let a = this.state.items[x].image;
let b = this.state.items[x].title;
let c = this.state.items[x].text;
console.log(a);
composant.push(<li>
<div> <Card picture={a} title={b}/> <Text text={c}/> </div>
</li>);
i++;
}
return (
<div className="container">
<Navbar/>
{composant}
</div>
);
}
}
export default App;
inside push i don’t know why the code is not shown
I think it would be a lot easier to read your code if you use map instead of a loop to render a list. This is actually the first time I see someone using a loop for what you are trying to achieve, which I think is rendering a list.
i pasted the code of app.js in this codesanbox link https://codesandbox.io/s/1wnk8nlv7q.
i also used map it doesn’t seem to work,and i’am sorry for the late response
thanks for helping me,i figure out how to solve it,something was wrong with the tags of the components,that’s weird i don’t know why it’s doesn’t wanted to work at first time