[ReactJS] Récupérer la key et valeur d'un objet

Bonjour,

Je suis bloqué sur une étape, j'ai besoin d'aide si possible. Dans le code ci-dessous j'aimerai récupérer toutes les keys et valeur de mon object pour les afficher sur ma page, mais je ne vois pas comment faire... est-ce que quelqu'un voit comment je pourrai faire svp ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
class Course extends React.Component {
 
 legume = () => {
 
    const objectLegume = { carottes: 10, clémentine: 6, salade: 2, tomate: 5}
 
   return (
              <li >{console.log(objectLegume)}</li>
      )
  };
 
  render() {
 
    return (
      <section className="container">
        <div className="row">
          <div className="col-sm-6">
            <h1>test</h1>
               {this.legume()}
          </div>
        </div>
      </section>
      );
  }
}

class Course extends React.Component { legume = () => { const objectLegume = { carottes: 10, clémentine: 6, salade: 2, tomate: 5} const test = Object .keys(objectLegume) .map((key) => <li key={key}>{key} : {objectLegume[key]} </li> ); return test } render() { return ( <section className="container"> <div className="row"> <div className="col-sm-6"> <h1>test</h1> {this.legume()} </div> </div> </section> ); } }