Getting Undefined while accessing the values of data object inside map in Next.js-CodePudding

// while accessing the object values from data, I'm getting undefined in map

// ../data/section1

const data = [{
    id: 1,
    image: './images/homepage/xbox-games.png',
    text: 'Buy Xbox games and consoles',
}, {
    id: 2,
    image: './images/homepage/shop_surface_devices.webp',
    text: 'Shop surface devices',
}, {
    id: 3,
    image: './images/homepage/choose_your_ms_365.png',
    text: 'Choose your Microsoft 365',
}, {
    id: 4,
    image: './images/homepage/shop_windows_10.png',
    text: 'Shop Windows 10',
}]
export default data;

// the actual component

    import data from "../data/section1";
    
    const Section1 = () => {
    
      return (
        <>
            <div >
                {data.map((vals) => {
                  <div >
                    <img src={vals.image}/>
                    <p>{vals.text}</p>
                  </div>
                })}
            </div>
        </>
      )
    }
    
    export default Section1;

CodePudding user response：

return JSX from the map

    import data from "../data/section1";
    
    const Section1 = () => {
    
    
      return (
        <>
            <div >
                {data.map((vals) => {
                  return (
                    <div >
                      <img src={vals.image}/>
                      <p>{vals.text}</p>
                    </div> 
                  )
                })}
            </div>
        </>
      )
    }
    
    export default Section1;

CodePudding user response：

I had the same problem, then tried the first bracket instead of the second, and it resolved the problem

import data from "../data/section1";

const Section1 = () => {

  return (
    <>
        <div >
            {data.map((vals) => (
              <div >
                <img src={vals.image}/>
                <p>{vals.text}</p>
              </div>
            ))}
        </div>
    </>
  )
}

export default Section1;