How to render multiple icons from a data component in a Card

user_15106125 0
Viewed 109

I want to create dynamic cards with the datas imported from the data.js component. The problem I'm facing right know is to figure out how i can display the crypto icons in it. I've just imported one of the for demonstrating porpuses.

But how can i import them all into the cards. So lets say, if there are just 1 icons in the data source, it just displays one. But in other cards there might be more.

Thinking about a ternary operator to solve this issue?

This is the card component below.

import React from 'react'
import data from "./data";
import { Button } from 'react-bootstrap';
import { Card } from 'react-bootstrap';

function PersonalCard() {
    const cards = data.map((item, id) => {
        console.log(item)
        return (
            <Card key={id} style={{ width: '18rem' }}>
            <Card.Img alt="crypto icons" variant="top" src={`./images/${item.crypto.btc}`} />
            <Card.Body>
                <Card.Title>{item.title}</Card.Title>
                <Card.Text>
                {item.text}
                </Card.Text>
                <Button variant="primary">{item.button}</Button>
            </Card.Body>
            </Card>
        )
    })

    return (
        <div>
            {cards}
        </div>
    )
}

export default PersonalCard

Below is the data.js. Array of objects.

export default [
    {
        id: 1,
        title: "Brack.ch", 
        text: "wir akzeptieren folgende Kryptowährungen",
        crypto: {
            btc: "btc.png",
            eth: "eth.png",
            xrp: "xrp.png",
        },
        button: "zum Onlineshop"
    },
    {
        id: 2,
        title: "Brack.ch", 
        text: "wir akzeptieren folgende Kryptowährungen",
        crypto: {
            btc: "btc.png",
            eth: "eth.png",
        },
        button: "zum Onlineshop"
    },
    {
        id: 3,
        title: "Brack.ch", 
        text: "wir akzeptieren folgende Kryptowährungen",
        crypto: {
            btc: "btc.png",
            xrp: "xrp.png",
        },
        button: "zum Onlineshop"
    },
    {
        id: 4,
        title: "Brack.ch", 
        text: "wir akzeptieren folgende Kryptowährungen",
        crypto: {
            btc: "btc.png",
        },
        button: "zum Onlineshop"
    },
]
reactjs
1 Answers

You can use Object.values(item.crypto) to get a list of image names (no need to worry about the number of images it will have) and use map to iterate over them and display.

Try like this.

function PersonalCard() {
  const cards = data.map((item, id) => {
    console.log(item);
    return (
      <Card key={id} style={{ width: "18rem" }}>
        {Object.values(item.crypto).map((imgName) => (
          <Card.Img
            alt="crypto icons"
            variant="top"
            src={`./images/${imgName}`}
          />
        ))}
        <Card.Body>
          <Card.Title>{item.title}</Card.Title>
          <Card.Text>{item.text}</Card.Text>
          <Button variant="primary">{item.button}</Button>
        </Card.Body>
      </Card>
    );
  });

  return <div>{cards}</div>;
}

Code Sandbox

user_85104050
Related