Espero que alguien aquí pueda ayudarme.
Estoy tratando de construir un carrusel de búhos a partir de una serie de objetos. pero por alguna razón no se reconoce la matriz, agradecería si alguien pudiera ayudar a encontrar el error que he cometido aquí.
Los mensajes de error que recibo son:
'elemento' no está definido. ya 'tv' se le asigna un valor pero nunca se usa.
Aquí tienes el código:
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 ejecuta una función para cada elemento, desea un map en este caso (y tiene que devolver el JSX de la función, lo que no está haciendo actualmente)
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;Cualquier expresión Javascript debe estar entre corchetes "{}" y reemplazar forEach por mapa porque forEach no devuelve nada y noto que usa una función y no devuelve nada para solucionar esto, puede agregar return antes del componente OwlCarousel o usar función de flecha con paréntesis.
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;