Блог

Я извлекаю данные для нескольких записей из коллекции базы данных MongoDB.Теперь я хочу, чтобы при нажатии пользователем на любое из полученных изображений всплывало только это изображение с новым свойством ширины и высоты, как это можно сделать.Ниже показан снимок экрана для извлечения и отображения данных в браузере

Код для извлечения данных выглядит следующим образом

 import React, { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";
import axios from "axios";

const Allads = () => {
  const [data, setData] = useState("");
  const [imagePath, setPath] = useState("");

  const getData = () => {
    axios
      .get("/ads")
      .then((response) => {
        // const data = response.data

        setData(response.data.data);
        // console.log(response.data);
        console.log(data);
        // const imgg = data.images[0]
        //  console.log(imgg)
        //setPath('http://localhost:3000/uploads/profilepics/' data.images[0])
      })
      .catch((error) => {
        console.log(error);
      });
  };

  useEffect(() => {
    getData();
  }, []);

  if (data.length > 0) {
    return data.map((datas, index) => {
      console.log(datas);
      return (
        <div className="datas" key={datas._id}>
          <div style={{ marginTop: "20px" }} class="container-fluid">
            <div class="row">
              <div class="col-lg-1 col-md-1 col-sm-1 "></div>

              <div class="col-lg-4 col-md-4 col-sm-4 ">
                <div
                  style={{ backgroundColor: "#1c2237", height: "180px" }}
                  class="row"
                >
                  <div class="col-lg-12 col-md-12 col-sm-12">
                    <h3 style={{ color: "#f00946" }}>
                      {datas.make} {datas.model}
                    </h3>
                    <p>
                      <b>{datas.location.formattedAddress}</b>
                    </p>
                    <p>
                      {datas.year} | {datas.mileage} Km | interior:{" "}
                      {datas.intcolor} | exterior: {datas.extcolor} |{" "}
                      {datas.engine} cc | {datas.transmission} |
                    </p>
                    <p>Updated: {datas.createdAt} </p>
                  </div>
                </div>

                <div
                  style={{ backgroundColor: "#f00946", height: "180px" }}
                  class="row"
                >
                  <div class="col-lg-12 col-md-12 col-sm-12">
                    <h5 style={{ color: "#1c2237" }}> PKR: {datas.price} </h5>
                    <p style={{ marginTop: "70px" }}>
                      <b>mob #:</b>
                      {datas.mobilenumber}
                    </p>
                    <p style={{ marginTop: "8px" }}>
                      <b>tel #:</b>
                      {datas.secondmobilenumber}
                    </p>
                  </div>
                </div>
              </div>

              <div class="col-lg-6 col-md-6 col-sm-6 ">
                <div style={{ backgroundColor: "white" }} class="row">
                  <div class="col-lg-4 col-md-4 col-sm-4  ">
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[0]}`}
                      alt="abc"
                    />
                  </div>
                  <div
                    style={{ paddingRight: "100px" }}
                    class="col-lg-4 col-md-4 col-sm-4 "
                  >
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[1]}`}
                      alt="abc"
                    />
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-4 ">
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[2]}`}
                      alt="abc"
                    />
                  </div>
                </div>

                <div style={{ backgroundColor: "white" }} class="row">
                  <div class="col-lg-4 col-md-4 col-sm-4 ">
                    {" "}
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[0]}`}
                      alt="abc"
                    />
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-4 ">
                    {" "}
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[1]}`}
                      alt="abc"
                    />
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-4 ">
                    {" "}
                    <img
                      style={{ width: "180.5px", height: "180.5px" }}
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[2]}`}
                      alt="abc"
                    />
                  </div>
                </div>
              </div>

              <div class="col-lg-1 col-md-1 col-sm-1 "></div>
            </div>
          </div>
        </div>
      );
    });
  } else {
    return <h3>no more ads</h3>;
  }
};
export default Allads;
 

Вот код для предварительного просмотра любого нажатого изображения. Я добавил комментарии, чтобы объяснить, что я сделал на каждом шаге.

https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/image.js

Вы можете увидеть код, выполняемый на https://ikqdn.csb.app/image в codesandbox browser

Шаги

• Иметь selectedImage состояние для хранения текущего выбранного изображения
• Предварительный просмотр отображается только в том случае, если выбрано какое-либо изображение, т.Е. Если изображение не выбрано, то не показывайте никакого предварительного просмотра.

Note: I have done minimalistic Styling for a proper understanding you can do the rest as per your requirements.