How to consume a constant in another JSX component

Question

I have a constant:

const dados = [{
 id: 1,
 nome: 'Juliano',
 idade: 25,
 descricao: 'Front-end',
}, {
 id: 2,
 nome: 'Italo',
 idade: 29,
 descricao: 'Back-end',
}]

I export all this constant, via: export { data }; but I don’t know how to consume it in a separate component, as I would need to leave it as follows:

<h1>{dados.nome}</h1>
<h2>{dados.idade}</h2>
<h3>{dados.descricao}</h3>

However I do not know the syntax to consume it after imported, with the:

import dados from './dados.jsx'

Answer 1

You need to do a destructuring:

import { dados } from './dados.jsx'

And if you want to use this syntax:

<h1>{dados.nome}</h1>
<h2>{dados.idade}</h2>
<h3>{dados.descricao}</h3>

You should loop the array:

dados.map(dado) => {
  <h1>{dado.nome}</h1>
  <h2>{dado.idade}</h2>
  <h3>{dado.descricao}</h3>
}

Or access by the index in the array:

<h1>{dados[0].nome}</h1>
<h2>{dados[0].idade}</h2>
<h3>{dados[0].descricao}</h3>

But it will only get the first index of your array

I hope I’ve helped.