Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Best practices on React for rendering lists

I’m just learning react and I saw so far 2 ways of rendering lists, the first declaring a const after mapping the data and then rendering this new list and the second one mapping directly inside the jsx

2 ways to render

Which way would be more appropiate, is used normally?

Tags:

2

Answers


  1. 0

    We’re bordeline on style/opinion here, but my take on this is that:

    option #2 is better when it’s really as simple as what you wrote (directly mapping a list of instances into a list of components without logic in between). And it does it all in one place, so readability is best.

    I don’t think #1 is a good option for two reasons: the JSX stuff should be (as much as possible) in the render part (i.e. the return) not before the render. Above the render, we manipulate the data, after we build the DOM. And also it makes you look at two places for something trivial that should be done all at once.

    And if you ever need to make the map lambda more complex than a direct one liner, then don’t. Either transform the data before the render, or do it in the <Card /> component.

    N.B.: I’m giving the opposite answer from @gaitat, but with a rationale: [before return it’s data, after it’s JSX]. And I agree with the principle, it’s just that I consider a .map() not being code complexity.

    Login or Signup to reply.
  2. 0

    I agree with zmo, that the 2nd option is better. Keeping the stuff you are going to render together improves readability and cognitive load.

    But there is a 3rd option; creating an intermediary component i.e <CardContainer> that renders a list of cards. This way the <App> is off the hook when is comes to rendering the <Card> components.

    Also, when you use map, don’t forget to assign a unique key to your items!

    const { useState, StrictMode } = React;

const App = ({ title }) => {
  const cardsData = CardsData();
  return <CardContainer cards={cardsData} />
};

const CardContainer = ({ cards }) => {
  return (
    <div className="card-container">
      {cards && cards.length
        ? cards.map((card) => <Card key={card.id} {...card} />)
        : "No cards..."}
    </div>
  );
};

const Card = ({ id, name, img, rarity }) => {
  return (
    <div className="card" data-rarity={rarity}>
      <div className="card-name">{name}</div>
      <div className="card-image">
        <img src={img} />
      </div>
      <div className="card-text">Flavor text here...</div>
    </div>
  );
};

ReactDOM
  .createRoot(document.getElementById('root'))
  .render(
    <StrictMode>
      <App/>
    </StrictMode>
  );

function CardsData() {
  return [
    { id: 1, name: 'Mighty Cat', img: 'https://placecats.com/bella/120/120', rarity: 'EPIC' },
    { id: 2, name: 'Strong Cat', img: 'https://placecats.com/bella/120/120', rarity: 'RARE' },
    { id: 3, name: 'Cat', img: 'https://placecats.com/bella/120/120', rarity: 'COMMON' }
  ];
}
    *, *::before, *::after {
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #222;
  color: #eee;
}

.card-container {
  display: flex;
  gap: 1rem;
}

.card[data-rarity="EPIC"] { background: purple; }
.card[data-rarity="RARE"] { background: blue; }
.card[data-rarity="COMMON"] { background: yellow; }

.card[data-rarity="EPIC"],
.card[data-rarity="RARE"] {
  .card-name {
    color: white;
    border-color: white;
  }
}

/* Holographic hover effect */
.card[data-rarity="EPIC"] {
  .card-image {
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        45deg,
        rgba(255, 0, 0, 0.3),
        rgba(255, 127, 0, 0.3),
        rgba(255, 255, 0, 0.3),
        rgba(0, 255, 0, 0.3),
        rgba(0, 255, 255, 0.3),
        rgba(0, 0, 255, 0.3),
        rgba(139, 0, 255, 0.3)
      );
      mix-blend-mode: overlay;
      opacity: 0.6;
      pointer-events: none;
      z-index: 1;
    }
    
    &:hover {
      img {
        filter: hue-rotate(360deg) brightness(1.5);
      }
    }
    
    img {
      display: block;
      width: 100%;
      height: auto;
      filter: hue-rotate(180deg) brightness(1.2) contrast(1.1);
      mix-blend-mode: screen;
      transition: all 0.3s ease-in-out;
    }
  }
}

.card {
  width: 8rem;
  height: 12rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: thin solid black;
  padding: 0.2rem;
  color: black;
}

.card-name {
  border: thin solid black;
  width: 100%;
  padding: 0.25rem 0.5rem;
  text-align: center;
  font-weight: bold;
}

.card-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.card-image img {
  max-width: 100%;
  height: auto;
}

.card-text {
  width: 100%;
  background: white;
  border: thin solid black;
  padding: 0.25rem;
  font-size: smaller;
}
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search