How to Render this Array in array object-CodePudding

Hi I want to render this Advice on the screen but I could not do it I tried to map but that didn't helped please help me

import React, { useState, useEffect } from 'react'

export default function UsersData() {
  const [Users, setUsers] = useState([{
    "slip": {
      "id": 41,
      "advice": "Don't use Excel or Powerpoint documents for your basic word processing needs."
    }
  }])

  return(
    <>
      <h2> React Fetch API Example </h2>
        <ul>
          {/* Not sure what to write here */}
        </ul>
    </>
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I tried {Users.map(e=>{e.slip}) but it didn't work.

CodePudding user response：

Using map function you can print whole array and sample code below here.

<ul>
    {Users.map((element) => (
      <li key={element.slip.id}>{element.slip.advice}</li>
    ))}
  </ul>

CodePudding user response：

It should be as simple as writing a mapping function:

export default function UsersData() {
  const [Users, setUsers] = useState([
    {
      slip: {
        id: 41,
        advice:
          "Don't use Excel or Powerpoint documents for your basic word processing needs.",
      },
    },
  ]);

  return (
    <>
      <h2>React Fetch API Example</h2>
      <ul>
        {Users.map((user) => (
          <li key={user.slip.id}>{user.slip.advice}</li>
        ))}
      </ul>
    </>
  );
}

Here's a sample for your ref.

CodePudding user response：

Use this:

import React, { useState, useEffect } from 'react'

export default function UsersData() {
  const [Users, setUsers] = useState([
    {

      "slip": {
      "id": 41,
      "advice": "Don't use Excel or Powerpoint documents for your basic word processing needs."
      }
      }
  ])



  return (
    <>
      <h2>React Fetch API Example</h2>
      <ul>
        {Users.map(({slip})=>(
           <li key={slip.id}>{slip.advice}</li>
        ))}
      
      </ul>
    </>
  )
}

CodePudding user response：

<h2>React Fetch API Example</h2>
    <ul>
      {Users.map((user) =>
        Object.keys(user).map((key) => (
          <li>
            {user[key].id} - {user[key].advice}
          </li>
        ))
      )}
    </ul>