迭代 JSX 中的 object 属性

Question

New to React/JSX so please bear with me. I have an API that returns an object as follows

var currObj = {
  SKU : 'Test_SKU_120934',
  category : 'Home',
  inventory_status : 1.
}

I want to iterate over this object and return a html unnumbered list as follows

<ul>
  <li> <strong>SKU</strong> : 'Test_SKU_120934'</li>
  <li> <strong>category</strong>: 'Home' </li>
  <li> <strong>inventory_status</strong> : 1 </li> 
</ul>
```
I can accomplish this in normal Javascript using 'for...in' loop. However, that loop doesn't return anything. How do I write statement below?
```
render () {
    return (

    );
}
```

Answer 1

as you got the answer in the comment you have to use the map which will return the array of children that will be rendered in the jsx.

here is the code snippet.

 /* other react component body. . . */ // targeted object var currObj = { SKU: 'Test_SKU_120934', category: 'Home', inventory_status: 1. } const objectList = Object.keys(currObj).map(k => ( <li key={k} ><strong>{k}</strong>: {currObj[k]}</li> )); return ( <ul>{objectList}</ul> ); // here objectList is returned by the map function. and Object.keys function creates iterable array of keys from object.

Answer 2

Here is what you need. Link to the working solution.

import "./styles.css";

export default function App() {
  var currObj = {
    SKU: "Test_SKU_120934",
    category: "Home",
    inventory_status: 1
  };

  const objectArr = Object.keys(currObj).map((k, idx) => (
    <li key={idx}>
      <strong>{k}</strong>: {currObj[k]}
    </li>
  ));

  return (
    <div className="App">
      <ul>{objectArr}</ul>
    </div>
  );
}

Answer 3

Object.entries

return (
  <ul>
   {Object.entries(yourProp).map(([key,val]) => (
     <li key={key}><strong>{key}</strong>: '{val}'</li>
   ))}
  </ul>
)