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!

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

Answer 2

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