React fetch data of objects and render

Question

I am doing a peronal project in React.js. I am fethcing data and I want to render that data in the screen. I am having issues with it as it is an object the data. My first try was with map, but it didn't work. This is the code:

import { useEffect, useState } from 'react';

const Home = () => {
  const [result, setResult] = useState([]);

  useEffect(() => {
    fetch('https://www.betright.com.au/api/racing/todaysracing')
      .then(res => {
        return res.json();
      })
      .then((data) => {
        setResult(data);
        console.log('data useEffect', data)
      },
      (err) => {
        return console.error(err)
      })
  }, [])
  console.log('result', result)
  return (
    <>
    <h1>Upcoming Racing</h1>
    {result?.map((value, key) => (
        <table key={key}>            
            <thead>
                <tr>
                    <th>Greyhound</th>
                    <th>Harness</th>
                    <th>Throughbred</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{value?.Greyhound?.Venue}</td>
                    <td>{value?.Harness?.Venue}</td>
                    <td>{value?.Throughbred?.Venue}</td>
                </tr>
            </tbody>
        </table>
    ))}
    </>
  );
}

export default Home;

Then I tried with Object.keys/values/entries and I couldn't make it work either way:

{Object.keys(result).map((value, key) => (
        <li key={key}>
            <span>key: {key} dogs: {result[value].VenueId}</span>
        </li>
    ))}

My idea is to display in a list the first 5 races of each dog This is the whole code in sandbox. This is the console.log of data.:

{Throughbred: Array(7), Harness: Array(6), Greyhound: Array(10)}
Greyhound: Array(10)
0:
CountryCode: "AUS"
MasterCategoryName: "Australian-Greyhound"
Race1:
AdvertisedStartTime: "/Date(1640906160000)/"
CountryCode: null
EventId: 6127205
EventName: null
EventTypeId: 3
HasFixedMarkets: false
IsOpenForBetting: false
MarketShortcuts: null
MasterCategoryName: null
RaceNumber: 8
ResultStatusId: 0
Results: null
SecondsToJump: 200
Venue: null
VenueId: 0
[[Prototype]]: Object
Venue: "Ballarat"
VenueId: 1077
[[Prototype]]: Object
1: {VenueId: 1413, Venue: 'Hove Bags', Race1: {…}, CountryCode: 'GBR', MasterCategoryName: 'Overseas-Greyhound'}
2: {VenueId: 1023, Venue: 'Richmond', Race1: {…}, CountryCode: 'AUS', MasterCategoryName: 'Australian-Greyhound'}
3: {VenueId: 15831, Venue: 'Towcester Bags', Race1: {…}, CountryCode: 'GBR', MasterCategoryName: 'Overseas-Greyhound'}
4: {VenueId: 1082, Venue: 'Cannington', Race1: {…}, CountryCode: 'AUS', MasterCategoryName: 'Australian-Greyhound'}
5: {VenueId: 1079, Venue: 'Geelong', Race1: {…}, CountryCode: 'AUS', MasterCategoryName: 'Australian-Greyhound'}
6: {VenueId: 1026, Venue: 'Wagga', Race1: {…}, CountryCode: 'AUS', MasterCategoryName: 'Australian-Greyhound'}
7: {VenueId: 12989, Venue: 'Harlow Bags', Race1: {…}, CountryCode: 'GBR', MasterCategoryName: 'Overseas-Greyhound'}
8: {VenueId: 1216, Venue: 'Crayford', Race1: {…}, CountryCode: 'GBR', MasterCategoryName: 'Overseas-Greyhound'}
9: {VenueId: 12976, Venue: 'Newcastle Bags', Race1: {…}, CountryCode: 'GBR', MasterCategoryName: 'Overseas-Greyhound'}
length: 10
[[Prototype]]: Array(0)
Harness: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
Throughbred: (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

Can you please provide us with the value of console.log('data useEffect', data) ? — benmotyka
– benmotyka, Commented Dec 31, 2021 at 10:13
I just updated the post witht the console.log of data @RahulSharma — Joaquin Palacios
– Joaquin Palacios, Commented Dec 31, 2021 at 10:18

Rahul Sharma · Accepted Answer · 2021-12-31 10:25:21Z

2

You can use entries to solve this, it'll give key and value as an array.

{
  Object.entries(result).map(([key, value]) => (
    <li key={key}>
      <span>
        key: {key}
        dogs: {value.slice(0, 5).map((dog) => dog.VenueId)}
      </span>
    </li>
  ));
}

answered Dec 31, 2021 at 10:25

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

React fetch data of objects and render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related