// mientras accedo a los valores del objeto desde los datos, no estoy definido en el mapa
// ../datos/sección1
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;// el componente real
import data from "../data/section1"; const Section1 = () => { return ( <> <div class="mx-20"> {data.map((vals) => { <div class=""> <img src={vals.image}/> <p>{vals.text}</p> </div> })} </div> </> ) } export default Section1;return JSX from the map import data from "../data/section1"; const Section1 = () => { return ( <> <div class="mx-20"> {data.map((vals) => { return ( <div class=""> <img src={vals.image}/> <p>{vals.text}</p> </div> ) })} </div> </> ) } export default Section1;Tuve el mismo problema, luego probé el primer soporte en lugar del segundo, y resolvió el problema
importar datos de "../data/section1";
const Section1 = () => { return ( <> <div class="mx-20"> {data.map((vals) => ( <div class=""> <img src={vals.image}/> <p>{vals.text}</p> </div> ))} </div> </> ) } export default Section1;