How to Render this Array in array object

Question

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.

Yeah that won't work because it would try to render slip or each user. But slip is an object. Try my answer. And if that works for you please consider marking the answer as a solution( ✅ ) to close the loop. :) — SiddAjmera
– SiddAjmera, Commented Apr 23, 2022 at 8:22

Aakash Limbani · Accepted Answer · 2022-04-23 09:25:41Z

1

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>

answered Apr 23, 2022 at 9:25

Aakash Limbani

1531 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Rotteveel · Accepted Answer · 2022-04-23 10:44:29Z

1

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.

edited Apr 23, 2022 at 10:44

Mark Rotteveel

110k240 gold badges160 silver badges232 bronze badges

answered Apr 23, 2022 at 8:21

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Comments

Tanay · Accepted Answer · 2022-04-23 08:20:43Z

0

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>
    </>
  )
}

answered Apr 23, 2022 at 8:20

Tanay

8991 gold badge8 silver badges13 bronze badges

Comments

Adnan · Accepted Answer · 2022-04-23 08:33:40Z

0

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

answered Apr 23, 2022 at 8:33

Adnan

7475 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to Render this Array in array object

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related