dispaly list of cards in react

Question

new with react
i want to know why my cards are not showing up in the body when i pass them some minimal data.

so this is my code:

import CardsList from "./cardsList";

function allCards() {
  const cardsArr = [
    {
      id: 1,
      image:
        "https://images.pexels.com/photos/784849/pexels-photo-784849.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
      country: "usa",
      fullName: "rafa rafa",
      cost: "25$",
      duration: "day",
    },
    {
      id: 2,
      image:
        "https://images.pexels.com/photos/784849/pexels-photo-784849.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
      country: "poland",
      fullName: "rafa rafa",
      cost: "45$",
      duration: " 2 days",
    },
  ];

  return <CardsList cards={cardsArr} />;
}

export default allCards;

import OneCard from "../common/card/card";

function cardsList(props) {
  if (props.cards.length === 0) {
    return (
      <div>
        <h2>No users found</h2>
      </div>
    );
  }

  return (
    <div className="cardsList">
      <ul>
        {props.cards.map((card) => {
          <OneCard
            key={card.id}
            id={card.id}
            image={card.image}
            country={card.country}
            fullName={card.fullName}
            cost={card.cost}
            duration={card.duration}
          />;
        })}
      </ul>
    </div>
  );
}

export default cardsList;

import ListGroup from "react-bootstrap/ListGroup";
import { Link } from "react-router-dom";
import Card from "react-bootstrap/Card";
import "./card.css";

function oneCard(props) {
  return (
    <>
      <Card style={{ width: "18rem" }}>
        <Card.Img src={props.image} />
        <Card.Body>
          <Card.Title>{props.CardTitle}</Card.Title>
          <Card.Text>{props.CardText}</Card.Text>
        </Card.Body>
        <ListGroup className="list-group-flush">
          <ListGroup.Item>country:{props.country}</ListGroup.Item>
          <ListGroup.Item>full name:{props.fullName}</ListGroup.Item>
          <ListGroup.Item>cost:{props.cost}</ListGroup.Item>
          <ListGroup.Item>duration:{props.duration}</ListGroup.Item>
        </ListGroup>
        <Card.Body id="bodyParentCardLink">
          <Link className="card-link" to={`/places/${props.id}`}>
            press to view
          </Link>
        </Card.Body>
      </Card>
    </>
  );
}

export default oneCard;

i get the cardsArr data to an arr of objects and see the cardlist component props in the console, but it's not appear in the body. i want to dispay it in the cards.

thnx for the helping!

Ryan Weiler · Answer 1 · 2022-12-16T00:58:03.710

1

I use to make this mistake a lot. What you need to do is in your cardsList component, where you are mapping through your props, you need to explicitly return the component like this. Good luck on your React journey!

        {props.cards.map((card) => {
            return(
            <OneCard
                key={card.id}
                id={card.id}
                image={card.image}
                country={card.country}
                fullName={card.fullName}
                cost={card.cost}
                duration={card.duration}
            />)
        })}

edited Dec 16 '22 at 00:58

answered Dec 16 '22 at 00:47

Ryan Weiler

71
5

One alternatie would be to not put the return value in a block. e.g. `(card) => ()` – Hikash Dec 16 '22 at 00:56
@Hikash very true! I just felt like using return was the most clear way to explain what he was missing. – Ryan Weiler Dec 16 '22 at 00:59

score 1 · Answer 2 · answered Dec 16 '22 at 00:55

You have to return something from your cards?.map call. When you use a function literal with brace-syntax you explicitly need a return statement for example

{props.cards.map((card) => {
          return (<OneCard
            key={card.id}
            id={card.id}
            image={card.image}
            country={card.country}
            fullName={card.fullName}
            cost={card.cost}
            duration={card.duration}
          />
         );
})}

However, if your only calculating an expression (<OneCard/> is effectively an expression) then you can omit the return statement, for example

{props.cards.map((card) =>
          <OneCard
            key={card.id}
            id={card.id}
            image={card.image}
            country={card.country}
            fullName={card.fullName}
            cost={card.cost}
            duration={card.duration}
          />;
        )}

thank u ! i cant believe i forgot that 'return' haha – NMP Dec 16 '22 at 01:10 — NMP, Dec 16 '22 at 01:10

dispaly list of cards in react

2 Answers2