I have a JSON API with 4 values:
"indicadores": [
{
"nome": "cdi",
"valor": 9.15
},
{
"nome": "ipca",
"valor": 10.06
}
]
This is my current code:
class App extends Component {
state= {
nome: [],
}
async componentDidMount(){
const response = await api.get('/indicadores');
this.setState({ nome: response.data });
}
render() {
const { nome } = this.state;
return (
.
.
.
<Card.Text>
{nome.map(nome => (
<div key={nome.nome}>
<p>{nome.valor}</p>
</div>
))}
</Card.Text>
.
.
.
This code works fine, but it shows the twoe values (valor): 9.15 and 10.06. What I need is a code that only shows one value, so that in one card it shows 9.15 and on the other, 10.06. How can I do this?
Bring the map one element back to make cards:
{nome.map(nome => (<Card.Text key={nome.nome}>
<div>
<p>{nome.valor}</p>
</div>
</Card.Text>
))}