Rendern von Eigenschaftswert und Eigenschaftsname eines JS-Objekts mit .map()

Question

Grundsätzlich muss ich ein Objekt in eine react-Komponente rendern. Es sieht etwa so aus:

var obj = { 
    prop1: "prop1", 
    prop2: "prop2", 
    prop3: "prop3", 
} 

Ich möchte nur beide Namen der Eigenschaft auszudrucken und den Wert, und zu tun, damit ich Karte verwende, die derzeit etwa wie folgt aussieht:

render(){ 
    return(
    <div> 
    {Object.keys(obj).map(function(data, key){ 
     return (<div>{data}</div>); 
    })} 
    </div> 
); 
} 

Die Sache ist, so wie ich es habe, ich kann nur den Eigenschaftsnamen rendern, ich habe ein paar Wege ausprobiert, um auf den Wert der Eigenschaft zuzugreifen, aber bisher funktioniert nichts.

Wie kann ich das tun?

Answer 1

die Notation Klammern

den Wert Get obj[key] mit (ich habe umbenannt data zu key):

var obj = { 
    prop1: "prop1", 
    prop2: "prop2", 
    prop3: "prop3", 
} 

render(){ 
    return(
    <div> 
    {Object.keys(obj).map(function(key){ 
     return (<div>{`${key}:${obj[key]}`}</div>); 
    })} 
    </div> 
); 
} 

Object#entries Mit

Object#entries gibt ein Array von a gegebene eigene enumerable Eigenschaft [Schlüssel, Wert] Paare. Sie können es anstelle von Object#keys verwenden und dann die Ergebnisse unter Verwendung von Array#map iterieren. Es wird jedoch nur von Chrome und FireFox unterstützt.

var obj = { 
    prop1: "prop1", 
    prop2: "prop2", 
    prop3: "prop3", 
} 

render(){ 
    return(
    <div> 
    {Object.entries(obj).map(function([key, value]){ 
     return (<div>{`${key}:${value}`}</div>); 
    })} 
    </div> 
); 
}