React JS - How to display objects from an array?-CodePudding

I am new to JS and React, so I have a simple question: I have an array with objects. How can I display/render all those objects and their properties? I need it for lists/cards later. 'map' maybe? Thank you in advance for your support!

import React from 'react';
import logo from './logo.svg';
import './App.css';

const champions = [
  {
    champName: 'Ivan Ivanov',
    sport: 'weightlifting',
    games: 'Barcelona 1992',
  },
  {
    champName: 'Ekaterina Dafovska',
    sport: 'biathlon',
    games: 'Nagano 1998',
  },
];

function App() {
  return (
    <div>
{champions.map((champions) => (
      <div
        name={champions.champName}
        sport={champions.sport}
        games={champions.games}
      />
    </div>
  );
}

export default App;

CodePudding user response：

You were nearly there, you were just missing some brackets and closing tags.

import React from 'react';
import logo from './logo.svg';
import './App.css';

const champions = [
  {
    champName: 'Ivan Ivanov',
    sport: 'weightlifting',
    games: 'Barcelona 1992',
  },
  {
    champName: 'Ekaterina Dafovska',
    sport: 'biathlon',
    games: 'Nagano 1998',
  },
];
    
function App() {
  return (
    <div>
      {champions.map((champions) => (
        <div>
          name={champions.champName}
          sport={champions.sport}
          games={champions.games}
        </div>
      ))}
    </div>
  );
}

export default App;

CodePudding user response：

I'm assuming you want your champion info to be visible.

(cause '<div name={champion.name}>' will not render anything visible to screen... Just add an attribute with that value to your div)

You can do something like this.

import React from 'react';
import logo from './logo.svg';
import './App.css';

const champions = [
  {
    champName: 'Ivan Ivanov',
    sport: 'weightlifting',
    games: 'Barcelona 1992',
  },
  {
    champName: 'Ekaterina Dafovska',
    sport: 'biathlon',
    games: 'Nagano 1998',
  },
];

// Create this component to render a single champion
function Champion({champion}) {
   return (
      <div>
          <div>Name: {champion.champName}</div>
          <div>Sport: {champion.sport}</div>
          <div>Games: {champion.games}</div>
      </div>
   )
}

function App() {
  return (
    <div>
      {
       champions.map((champion) => <Champion champion={champion} />)
      }
    </div>
  );
}

export default App;

Recap:

Create a component function to render one single champion
Use that component inside you .map()
Pass the champion to you new component

EDIT

Creating a component is fully optional, but having one can be useful in your case to separate concerns...

You could just do it in your template....

The following example has the exact same result (i'm including only the App function here for a light post)

function App() {
  return (
    <div>
      {
       /* We can do it right here as well, without a dedicated 
        component */
       champions.map((champion) => (
      <div>
          <div>Name: {champion.champName}</div>
          <div>Sport: {champion.sport}</div>
          <div>Games: {champion.games}</div>
      </div>
   ))
      }
    </div>
  );
}

CodePudding user response：

In your code, you are giving the attributes to the div which it doesn't recognize. You can check on W3 schools about which attributes are acceptable to div. By the way that is entirely a different topic and I recommend you to look into that too. For your current code, you can change your code like:-

import React from 'react';
import logo from './logo.svg';
import './App.css';

const champions = [
  {
    champName: 'Ivan Ivanov',
    sport: 'weightlifting',
    games: 'Barcelona 1992',
  },
  {
    champName: 'Ekaterina Dafovska',
    sport: 'biathlon',
    games: 'Nagano 1998',
  },
];

function App() {
  return (
    <div>
     {champions.map((champion) => (
        <div>{champion.champName}</div>
        <div>{champion.sport}</div>
        <div>{champion.games}</div>
       );
     }
    </div>
   )
}

export default App;

And if you really want to pass it like attributes (which we call props in React), you need to create a new component and your code can go something like this:

function Champion({name, sport, game}) {
return (
     <>
       <div>{name}</div>
       <div>{sport}</div>
       <div>{game}</div>
    </>
  )
}


function App() {
 return (
   <div>
      {champions.map((champion) => (
         <Champion 
           name={champion.champName}
           sport={champion.sport}
           game={champion.game}
          />
        );
      }
   </div>
  )
}

Also note that in React, the attributes for the HTML tags remains the same as "conventional". We can only pass the props to our custom React components. Sorry for the Bad english maybe but I hope it clears your concept.