Zugriff auf Schlüsselname in Schlüssel/Wert-Paaren auf Requisitenobjekt in React

Question

Ich arbeite an einer React-App und möchte, dass die Komponente, an der ich gerade arbeite, auf die Schlüsselnamen im Requisitenobjekt der Komponente zugreifen kann.

Zum Beispiel habe ich diese Aufgabe:

var fido = { 
animal: "dog", 
legs: 4, 
licksSelf: true 
} 

ich dann dieses Objekt übergeben über die Requisiten zu meinem Reagieren Komponente Objekt:

<Pet characteristics={fido} /> 

Da ist in meinem Reagieren Komponente für Pet, ich will Um auf den Schlüssel und den Wert zuzugreifen, wie könnte ich das tun? Zum Beispiel in diesem folgenden falschen Code:

class Pet extends React.Component { 
render() { 
    var petList = this.props.characteristics.map((char) => { 
    return (
    <div>{char.key} : {char.value}</div> // <-- what should this code look like? 
    ); 
    }; 
    return (
    <div>{petList}</div> 
    ); 
    }; 
}; 

Wer weiß, wie ich die Namen der Schlüssel in den Schlüssel-Wert-Paaren auf den Requisiten zugreifen Objekt? Vielen Dank!

Answer 1

Verwenden Object.entries Methode:

const petList = Object.entries(fido).map(([key,value])=>{ 
    return (
     <div>{key} : {value.toString()}</div> 
); 
}) 

value.toString() für Boolesche Typen richtig zu machen