reactjs rendering unoedered list of objects values-CodePudding

I want list the values of an object as unordered list

"name": {
"common": "Uruguay",
"official": "Oriental Republic of Uruguay",

}

CodePudding user response：

I think you need something like map method

const Users = () => {
  const data = [
    { id: 1, name: "John Doe" },
    { id: 2, name: "Victor Wayne" },
    { id: 3, name: "Jane Doe" },
  ];

  return (
    <div className="users">
      {data.map((user) => (
        <div className="user">{user}</div>
      ))}
    </div>
  );
};

CodePudding user response：

You can try this

export default function App() {
  const [obj] = useState({
    name: {
      common: "Uruguay",
      official: "Oriental Republic of Uruguay"
    },
    name2: {
      common: "Uruguay",
      official: "Oriental Republic of Uruguay"
    }
  });

  return (
    <div className="App">
      <h1>Unordered List</h1>
      <ul>
        {Object.keys(obj).map((v, i) => (
          <>
          <li className="user">{obj[v].common}</li>
          <li className="user">{obj[v].official}</li>
          </>
        ))}
      </ul>
    </div>
  );
}