Hope someone here would be able to help me out.
I am trying to build an Owl-Carousel from an array of objects. but for some reason the array is not been recognized, would appreciate if someone could help to find the mistake I have made here.
The error messages I am getting is:
‘item’ is not defined. and ‘tv’ is assigned a value but never used.
Here you have the code:
const tv = [ { name: 'Meu Pedacinho de Chao 01', personagem: 'Barbeiro', ano: 2014, de: 'Benedito Ruy Barbosa', img: { mpc1 }, alt: 'Meu Pedacinho de Chao 01' }... ] export class Televisao extends Component { render() { return ( <div class='container-fluid' > tv.forEach(function (item) { <OwlCarousel items={3} className="owl-theme" loop nav margin={8} > <div className='item card' > <img className='"card-img-top" ' src={item.img} alt={item.alt} /> <div className='card-body' > <h5 className="card-title" > ${item.name} </h5> < p class="card-text" > ${item.personagem} </p> < p class="card-text" > ${item.ano} </p> < p class="card-text" > ${item.de} </p> </div > </div > </OwlCarousel > } </div> ) } } export default Televisao;
Advertisement
Answer
Any expression Javascript should be inside curly brackets “{}” and replace forEach by map cause forEach doesn’t return anything and I notice that you use a function and doesn’t return anything to fix this you can add return before OwlCarousel component or use arrow function with parentheses.
const tv = [ { name: 'Meu Pedacinho de Chao 01', personagem: 'Barbeiro', ano: 2014, de: 'Benedito Ruy Barbosa', img: { mpc1 }, alt: 'Meu Pedacinho de Chao 01' }... ] export class Televisao extends Component { render() { return ( <div className="container-fluid"> {tv.map((item)=>( <OwlCarousel items={3} className="owl-theme" loop nav margin={8}> <div className="item card" > <img className="card-img-top" src={item.img} alt={item.alt} /> <div className="card-body"> <h5 className="card-title">{item.name}</h5> <p className="card-text">{item.personagem}</p> <p className="card-text">{item.ano}</p> <p className="card-text">{item.de}</p> </div> </div> </OwlCarousel> )} </div> ) } } export default Televisao;