Num projeto React, preciso adicionar elementos na página dinamicamente. Para isso, montei uma base de dados fictícia e usei o método map para percorrê-la, mas esse processo está me retornando os valores duplicados quando uso o concole.log para mapear o retorno dessa função. Podem me ajudar?
O código, a base de dados e o retorno do console está abaixo:
//Arquivo Data.js
export const data = [
{
id: 1,
title: 'CURSO',
description: 'lorem ipsum dolor',
category: 'software development',
duration: 20,
expireDate: null,
certified: true,
url: 'https://www.udemy.com'
},
{
id: 2,
title: 'CURSO',
description: 'lorem ipsum dolor',
category: 'infra',
duration: 20,
expireDate: null,
certified: true,
url: 'https://www.udemy.com'
},
{
id: 3,
title: 'CURSO',
description: 'lorem ipsum dolor',
category: 'redes',
duration: 20,
expireDate: null,
certified: true,
url: 'https://www.udemy.com'
}
]
//Arquivo index.js do componente Card
import { data } from '../../Data/Data.js'
function Card() {
return (
<div className='container'>
{
data.map(course => {
console.log(course.id)
})
}
</div>
)
}
export default Card
//Arquivo App.js
import './App.css';
import Header from './components/Header'
import Card from './components/Card'
function App() {
return (
<div className="App">
<Header />
<Card />
</div>
);
}
export default App;
//Retorno no console
1
2
3
1
2
3