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;
forEach executes a function for every element, you want map in this case (and have to return the JSX from the function, which you're not currently doing)
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.map(function (item) {
return (<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;
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;