Replacing Images Hard Coded on a DaisyUI Component (For Customization)

DaisyUI Component code for importing cards to a web page

Link to DaisyUI component for visualization: https://daisyui.com/components/card/

Comments are included to the identify the lines that need adjustment.

<div className="card bg-base-100 w-96 shadow-xl">

{/*Figure element that holds the source attribute of img element*/}
  <figure>
{/*Goal intended is to replace the hard coded URL image to customize the card as needed to any other image*/}
    <img
      src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
      alt="Shoes" />
  </figure>

  <div className="card-body">
    <h2 className="card-title">
      Shoes!
      <div className="badge badge-secondary">NEW</div>
    </h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
    <div className="card-actions justify-end">
      <div className="badge badge-outline">Fashion</div>
      <div className="badge badge-outline">Products</div>
    </div>
  </div>
</div>

How would you tackle this problem?

Hi @Damienb123,

I would tackle that problem like this

import React from 'react';

const Card = ({ imageSrc, title, description, badges }) => {
  return (
    <div className="card bg-base-100 w-96 shadow-xl">
      <figure>
        <img src={imageSrc} alt={title} />
      </figure>
      <div className="card-body">
        <h2 className="card-title">
          {title}
          <div className="badge badge-secondary">NEW</div>
        </h2>
        <p>{description}</p>
        <div className="card-actions justify-end">
          {badges.map((badge, index) => (
            <div key={index} className="badge badge-outline">{badge}</div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Card;

Create the Card Component: Define the Card component to accept imageSrc and other props.

Card Component: The Card component is designed to accept imageSrc, title, description, and badges as props. This makes it reusable with different data.

now you have a <Card/> component you can use throughout your front-end, i hope that helps some :)

in this code as well above it uses Arrow functions from ES6 JavaScript.

ES6 Features

Arrow Functions: The expression inside the curly braces uses an arrow function: badge => (...). Arrow functions provide a concise syntax for writing function expressions. They automatically bind this context from the enclosing scope, making them more predictable in certain contexts. Example:

(badge, index) => (
  <div key={index} className="badge badge-outline">{badge}</div>
)

Array.prototype.map():

The map method is used to iterate over the badges array. For each element in the array, it executes the provided function, returning a new array of elements based on the return value of the function.

Example:

badges.map((badge, index) => (
  <div key={index} className="badge badge-outline">{badge}</div>
))

Software-Engineering-Project-Team / online_shopping_system