How to show specific value via GET Request - React + Axios

Question

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?

Answer 1

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>
   ))}