How to call by the id of array in another component of React

Question

I have a card of products and I want when the user click on one of the cards, to show the full description of that product in a table that is in another component. I want to call it by id and show it like in a new page, but I do not know how to do it. I am new with react and Javascript as well. This is the array:

const Rooms = [{
    id: 1,
    roomType: "One Bedroom Villa",
    description: "these is some description",
    img: "https://ibb.co/LxTGdGp",
    },
    {
    id: 2,
    roomType: "Two Bedrooms Villa",
    description: "these is some description",
    img: "https://ibb.co/RYKdytH",
    },
    {
    id: 3,
    roomType: "Three Bedrooms Villa",
    description: "these is some description",
    img: "https://ibb.co/3y9hvqV",
    }
    ];

    export default Rooms;

This is the code that I have done to show this component:

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Table } from 'react-bootstrap';
import Rooms from "../Rooms/Rooms";
import { NavLink, Switch, Route } from "react-router-dom";



 const FullDescription = () => {
        return (
            <div>
              <NavLink to="/rooms">                
                <Table responsive>
                    <thead>                      
                        <th>{Rooms.map(({roomType}, index) => (
                          <th key={index} roomType={roomType}>Table heading</th>
                        ))}</th>                                              
                    </thead>
                    <tbody>                      
                        <td>{Rooms.map(({img}, index) => (
                          <td key={index} img={img}>Table cell {index}</td>
                        ))}  </td>                                            
                        <td>{Rooms.map(({description}, index) => (
                          <td key={index} description={description}>Table cell {index}</td>
                        ))} </td>                                                 
                    </tbody>
                </Table>
              </NavLink>
              <Switch>                         
                <Route path="/rooms:id">
                    {/* <ItemDetail /> */}
                </Route>       
              </Switch>
            </div>
        )
    }

    export default FullDescription;

I am using bootstrap as you can see. Also, I was not able to see the pictures in the page, I do not how to call them either but it is not my maine question, with sort how to show the description of the product I am more than happy. Thanks

Answer 1

maybe this solution can help you.

import React from "react";
import "./styles.css";
import { Card, Col, Container, Row, Table } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import Rooms from "../Rooms/Rooms";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Rooms = [
  {
    id: 1,
    roomType: "One Bedroom Villa",
    description: "these is some description",
    img: "https://ibb.co/LxTGdGp"
  },
  {
    id: 2,
    roomType: "Two Bedrooms Villa",
    description: "these is some description",
    img: "https://ibb.co/RYKdytH"
  },
  {
    id: 3,
    roomType: "Three Bedrooms Villa",
    description: "these is some description",
    img: "https://ibb.co/3y9hvqV"
  }
];

export default function App() {
  return (
    <div className="App">
      <Router>
        <Route exact path="/" component={RoomCards} />
        <Route path="/rooms/:id" component={FullDescription} />
      </Router>
    </div>
  );
}

Room Card Component

const RoomCards = () => {
  return (
    <Container>
      <Row>
        {Rooms &&
          Rooms.map(({ id, roomType, img, description }, index) => (
            <Col key={index}>
              <Link to={`/rooms/${id}`}>
                <Card>
                  <Card.Img variant="top" src={img} />
                  <Card.Body>
                    <Card.Title>{roomType}</Card.Title>
                    <Card.Text>{description}</Card.Text>
                  </Card.Body>
                </Card>
              </Link>
            </Col>
          ))}
      </Row>
    </Container>
  );
};

description Table Component

const FullDescription = (props) => {
  let id = props.match.params.id;
  const { roomType, description, img } = Rooms && Rooms[id - 1];

  return (
    <Table responsive>
      <thead>
        <tr>
          <th> Room Type </th>
          <th> description </th>
          <th> Image </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <h5> {roomType} </h5>
          </td>
          <td>
            <p> {description} </p>
          </td>
          <td>
            <img src={img} alt="" />
          </td>
        </tr>
      </tbody>
    </Table>
  );
};

working demo

Answer 2

Are you looking for something like this?

I have created using simply using html/css you can modify and use as per your requirement

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import App from "./App";
import RoomDetail from "./RoomDetail";

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/" component={App} />
      <Route exact path="/roomdetail/:id" component={RoomDetail} />
    </Switch>
  </Router>,
  document.getElementById("root")
);

App.js

import React from "react";
import {NavLink} from 'react-router-dom';
import "./style.css";
const Rooms = [{
    id: 1,
    roomType: "One Bedroom Villa",
    description: "these is some description",
    img: "https://ibb.co/LxTGdGp",
    },
    {
    id: 2,
    roomType: "Two Bedrooms Villa",
    description: "these is some description",
    img: "https://ibb.co/RYKdytH",
    },
    {
    id: 3,
    roomType: "Three Bedrooms Villa",
    description: "these is some description",
    img: "https://ibb.co/3y9hvqV",
    }
    ];
export default function App() {
  return (
    <>
    <div className="room">
      {Rooms.map(room=>
       <NavLink key={room.id} to={{
         pathname: `/roomdetail/${room.id}`,
         state: room
         }}>
        <div className="room-card">
        <div>{room.roomType}</div>
        <button>More details</button>
        </div>
       </NavLink>
      )}
    </div>
    Click on any cards to see more detail of cards
    </>
  );
}

RoomDetail.js

import React from "react";
import { useLocation } from "react-router-dom";

export default function RoomDetail() {
  const location = useLocation();
  console.log(location.state);
  const { state } = location;
  return (
    <div>
      <h1>{state.roomType}</h1>
      <p>{state.description}</p>
      <img src={state.img} alt={state.roomType} />
    </div>
  );
}

CSS

.room {
    display: flex;
}
.room-card {
  height: 200px;
  width: 200px;
  background: lightslategray;
  margin: 3px;
  color: #fff;
}

Live working demo