Passing Props (img url ) using React-Modal (react js)

user_17827440 0
Viewed 391

I need to pass image url to modal in react js. Like, on click the item from the "imgae attachment", it shows the modal with image for selected item. But it can't show my image data by passing img={item.document}, Here is my code below:

DepositRecord.js

import React, { Component } from "react";
import { Table } from "react-bootstrap";
import { Button, ButtonToolbar } from "react-bootstrap";
import { AddDepositModal } from "./AddDepositModal";

export class DepositRecord extends Component {
  constructor(props) {
    super(props);
    this.state = { deps: [], addModalShow: false };
  }

  componentDidMount() {
    this.refershList();
  }

  refershList() {
    this.setState({
      deps: [
        { id: 9, userId: "12", document: "img1_url" },
        { id: 8, userId: "16", document: "img2_url" },
        { id: 6, userId: "13", document: "img3_url" },
        { id: 4, userId: "1", document: "img4_url" },
        { id: 2, userId: "1", document: "img5_url" }
      ]
    });
  }

  render() {
    const { deps } = this.state;

    let addModalClose = () => this.setState({ addModalShow: false });

    return (
      <div>
        <h3>Customer's Deposit Record</h3>
        <br />

        <Table className="mt-4" striped bordered hover size="sm">
          <thead>
            <tr>
              <th>Deposit id</th>
              <th>user id</th>
              <th>img attachment</th>
            </tr>
          </thead>
          <tbody>
            {deps.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.userId}</td>
                <td>
                  <ButtonToolbar>
                    <Button
                      variant="primary"
                      onClick={() => this.setState({ addModalShow: true })}
                    >
                      image attachment
                    </Button>

                    <AddDepositModel
                      show={this.state.addModalShow}
                      onHide={addModalClose}
                      img={item.document}
                    />
                  </ButtonToolbar>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    );
  }
}

export default DepositRecord;

AddDepositModal.js <--the Madal component

import React, { Component } from 'react';
import { Modal, Button, Row, Col, Form } from 'react-bootstrap';

export class AddDepositModal extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (

            <Modal
                
                {...this.props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                    Deposit Record
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                <img src={this.props.img} width={700} height={1100}/>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="danger" onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>


        );

    }
}
export default AddDepositModal;

My Problem: I am not able to pass the image URL to a Modal component and have no better idea solving it in this code.

Please help me and if any including, changes or complete solution for perfect understanding for the requirement would be really great. Many Thanks in Advance!

react-props reactjs image javascript
1 Answers

Hello here's your solution

DepositRecord.js

import React, { useEffect, useState } from "react";
import { Button, ButtonToolbar, Table } from "react-bootstrap";
import AddDepositModal from "./AddDeposiModal";

const DepositRecord = () => {
  const [deps, setDeps] = useState([]);
  const [visibleModal, setVisibleModal] = useState(false);
  const [depImage, setDepImage] = useState(null);

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

  const loadDepsHandler = () => {
    const myRequest = new Request("https://randomuser.me/api/", {
      method: "GET",
      cache: "default",
    });
    debugger;
    fetch(myRequest)
      .then((res) => res.json())
      .then((data) => {
        const { results } = data;
        setDeps(results);
      })
      .catch((err) => console.log(err));
  };

  const setDepHandler = (id) => {
    const dep = deps.find((a) => a.id.value === id);
    debugger;
    setDepImage(dep.picture.large);
    setVisibleModal(true);
  };

  return (
    <div>
      <h3>Customer's Deposit Record</h3>
      <br />

      <Table className="mt-4" striped bordered hover size="sm">
        <thead>
          <tr>
            <th>Deposit id</th>
            <th>user name</th>
            <th>img attachment</th>
          </tr>
        </thead>
        <tbody>
          {deps.map((item) => (
            <tr key={item.id.name}>
              <td>{item.id.name}</td>
              <td>{item.value}</td>
              <td>
                <ButtonToolbar>
                  <Button
                    variant="primary"
                    onClick={() => setDepHandler(item.id.value)}
                  >
                    image attachment
                  </Button>
                </ButtonToolbar>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
      {visibleModal && (
        <AddDepositModal
          show={visibleModal}
          onHide={() => setVisibleModal(false)}
          image={depImage}
        />
      )}
    </div>
  );
};

export default DepositRecord;

AddDepositModal.js

 import React from "react";
 import { Button, Modal } from "react-bootstrap";

 const AddDepositModal = ({ show, onHide, image }) => {
  return (
    <Modal show={show} onHide={onHide}>
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Deposit Record
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <img src={image} width={700} height={1100} alt={image} />
      </Modal.Body>
      <Modal.Footer>
        <Button variant="danger" onClick={onHide}>
          Close
        </Button>
      </Modal.Footer>
    </Modal>
  );
};
export default AddDepositModal;

Async call added. This API is public so it's will take some time to get results .

user_74339610
Related