Array.forEach 的问题

Question

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;

Answer 1

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;

Answer 2

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;