Issues with an 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;

forEach doesnt return anything. you will need to use map instead — cmgchess, May 16 '22 at 10:39

score 0 · Answer 1 · answered May 16 '22 at 10:40

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;

Ossama Ismaili · Accepted Answer · 2022-05-16T19:53:18.130

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;

Hi Ossama, tks a lot for helping me out. But I am still getting an error, which I can not understand... doing the fixes you mentioned I get the folloing error: >Parsing error: Unexpected token, expected "," (61:17) ``` 60: 61: )} 62: ``` It does not recognise that I am closing the Brackets on {tv.map... and ask me to add a comma ( , ), I do not understand why should I put a comma in this line and even if try to add the comma, other issues are presented. — Victor Torres, May 16 '22 at 12:49
I edited the code, I notice that you are using class in JSX which confuse javascript between class of OOP and class of html so replace it with className. Tags should be written lik that or — Ossama Ismaili, May 16 '22 at 20:00

Issues with an Array.forEach

2 Answers2