Trying to use button element on reactstrap card to hide or display the card text

Question

I want to be able to click the card button that says detail to hide and display the card text ({card.description}). Would I have to use some sort of state function? Or is there an easier way with collapase? I want the card image and card title to display always and only have the card text be toggled between display and hidden.

 import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Card, Button } from 'react-bootstrap';

const ProductsInfo = () => {
    const cardInfo = [
        {
            id: "1",
            name: "Lion",
            price: "$6,000",
            description: "Asiatic Lion, always lives in a Pride, Found mostly in Africa and Asia",
            image: "https://cdn.britannica.com/29/150929-050-547070A1/lion-Kenya-Masai-Mara-National-Reserve.jpg",
            show: false
        },
        {
            id: "2",
            name: "Tiger",
            price: "$6,500",
            description: "The nine subspecies of Tigers are restricted to small pockets of Asia.",
            image: "https://upload.wikimedia.org/wikipedia/commons/8/81/2012_Suedchinesischer_Tiger.JPG",
            show: false
        },
        {
            id: "3",
            name: "Snake",
            price: "$1,000",
            description: " Snakes live in almost every corner of the world. They are found in forests, deserts, swamps and grasslands.They have no limbs, no moveable eyelids, and no ear openings.",
            image: "https://images.unsplash.com/photo-1571391733814-15ac29ac3544?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1052&q=80",
            show: false
        },
        {
            id: "4",
            name: "Zebra",
            price: "$2,500",
            description: "Three species of zebras live in Africa. They also have great hearing and an excellent sense of taste and smell",
            image: "https://images.unsplash.com/photo-1509870796364-6959d105b09c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80",
            show: false
        },
        {
            id: "5",
            name: "Octopus",
            price: "$8,000",
            description: "The octopus can only be found in salt water, but they live in all the oceans. They are considered the most intelligent of all the invertebrates",
            image: "https://images.unsplash.com/photo-1545671913-b89ac1b4ac10?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80",
            show: false
        },
        {
            id: "6",
            name: "Jellyfish",
            price: "$1,000",
            description: "These creatures have global distribution. You can find them in every ocean on Earth",
            image: "https://images.unsplash.com/photo-1501561942-ec1065e470aa?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80",
            show: false
        },
    ];

    const renderCard = (card, index) => {
        return (
            <div className="cards">
                <Card style={{ width: '18rem' }}>
                    <Card.Img variant="top" src={card.image} />
                    <Card.Body>
                        <Card.Title>{card.name} - {card.price}</Card.Title>
                        <Card.Text>
                           {card.description}
                        </Card.Text>
                        <Button>Blah</Button>
                    </Card.Body>
                </Card>
            </div>
        );
    };
    return <div className="grid">{cardInfo.map(renderCard)}</div>;
};


export default ProductsInfo;

This is what the app looks like on browser

Answer 1

Here's how you can maintain the state of the descriptions:

I created a simple react stackblitz to help you out.

use the cardInfo array as the initial state

  const [cards, setCards] = React.useState(cardInfo);

add a function for toggling the descriptions

  const toggleDescription = cardId =>
    setCards(prevCards =>
      prevCards.map(pC => (pC.id === cardId ? { ...pC, show: !pC.show } : pC))
    );

call this function when the button gets clicked

  return (
    <div>
      {cards.map(c => (
        <div key={c.id}>
          <h5>{c.name}</h5>
          <img height="50px" src={c.image} alt={c.name} />
          <br />
          {c.show && <p>{c.description}</p>}
          <button onClick={() => toggleDescription(c.id)}>
            toggle description
          </button>
        </div>
      ))}
    </div>
  );