My modal is not working in ReactJS

sharadcodes · September 27, 2019, 4:56am

gist.github.com

https://gist.github.com/sharadcodes/0e82218a454206c15b6c9277fb9e7492

MediaGallery.js

import React from "react";
import axios from "axios";
import { Modal } from "./Modal";

class MediaGallery extends React.Component {
  constructor() {
    super();
    this.state = {
      data: "",
      show: false,

This file has been truncated. show original

Modal.js

import React from "react";

export const Modal = ({ handleClose, show, children }) => {
  const showHideClassName = show ? "is-active" : "";

  return (
    <div>
      <div className={{ showHideClassName } + " modal"} id="modal">
        <div className="modal-background" onClick={handleClose} />
        <div className="modal-content" style={{ width: "70vw!important" }}>

This file has been truncated. show original

Here’s my gist

snigo · September 27, 2019, 5:41am

When you setState of the show to true your whole data would be re-rendered/mapped and every item will pass new show prop to every Modal, are you sure this is behavior you want to have?

sharadcodes · September 27, 2019, 5:49am

I just want to show the modal onclick and nothing else , And the images should be fetched from the api. I’m learning it can you suggest the corrections. @snigo

I just want to show the image modal for each image individually onclick. And close it by clicking on modal background. How to solve this problem.

Topic		Replies	Views
URGENT, React help needed JavaScript	3	220	June 1, 2021
I want to show specific images in the modal when i click on a card JavaScript	3	1553	August 9, 2023
Getting problem in styling react modal JavaScript	1	1196	February 2, 2021
React Bootstrap modal JavaScript	3	3463	February 2, 2021
React: function passed as a prop not working correctly JavaScript	2	2103	January 25, 2021

My modal is not working in ReactJS

Related topics