Question 258968 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – react open modal on click

I have a component with images and want them to open bigger as a slide (different component) when clicked.

The component where the all the images are

import {data} from '../works/works'
import Work from '../components/Work'

function Portfolio() {
    const WorkData  = data.map((item) => {
        return <Work 
                id={item.id} 
                title={item.title} 
                local={item.local} 
                src={item.src} 
                key={crypto.randomUUID()}
            />
    })
    return WorkData
}


export default function works() {

    return (
        <div className="works">
            <Portfolio />
        </div>
    )
}

the component where images functionalities are


export default function Work(props) {

    let src = require(`../imgs/works/${props.src}`)

    function click(id) {
        console.log(id)
    }

    return (
        <div onClick={ () => click(props.id) } id={`${props.id}`} className="work" style={{backgroundImage:`url(${src})`}}>
            <div className="title">
                <h4>{props.title}<br/>{props.local}</h4>
            </div>
        </div>
    )
}

and my slide component

import {useState} from 'react'

export default function Slide() {
    const [state, setState] = useState('hidden')


    return (
        <div className="slide" style={{visibility: state}}>
            <div className="image">
                <img src={src} alt={alt} slide={slide}></img>
            </div>
            <div className="controls"></div>
        </div>
    )
}

i know that i can do this with use state but i cannot, and i can be mistaken, figure out how to do this

The idea is when user clicks on each image, the image will open bigger on the slide component.

Tags:

2

Answers


  1. 0

    You can define a new state, let’s say:

    const [bigPicture, setBigPicture] = useState(null)

    Then create a Modal component that takes in 4 props, put this modal component inside of slide component.

    const Modal = ({isModal, setIsModal, imgUrl, setBigPicture}) => {
  return (
    <div style={{display: isModal ? "block" : "none"}}>
      <img src={imgUrl} alt="" />
      <span onClick={()=>{
        setIsModal(false);
        setIsBigPicture(null)
      }}>close</span>
    </div>
  )
}

export default Modal

    Anytime user clicks on the image, set the state to that image’s id. Anytime it is closed, set the state to null so that it is not displayed anymore.

    Login or Signup to reply.
  2. 0

    Below I have shared a simple code to display multiple images, and clicking on them opens them in full screen, click again to close the full screen mode.

    You can click on "Run code snippet" in the answer itself below to checkout the web app.

    const {useState} = React;


const APP_STYLE = {
  display: "flex",
  justifyContent: "center"
};

const MODAL_STYLE = {
  background: "red",
  position: "absolute",
  top: 0,
  bottom: 0,
  right: 0,
  left: 0
};

const Modal = ({ content, trigger }) => {
  const [on, setOn] = useState(false);
  if (!on) {
    return <div onClick={() => setOn(true)}>{trigger}</div>;
  }
  return (
    <div style={MODAL_STYLE} onClick={() => setOn(false)}>
      {content}
    </div>
  );
};

const Image = ({ hash, width, height }) => {
  const url = `https://robohash.org/${hash}`;
  return <img src={url} width={width} height={height} alt="robot pic" />;
};

const NUM_IMAGES = 5;
function App() {
  return (
    <div className="App" style={APP_STYLE}>
      {[...Array(NUM_IMAGES).keys()].map((idx) => (
        <Modal
          key={idx}
          trigger={<Image hash={idx} width="100px" height="100px" />}
          content={<Image hash={idx} width="100%" height="100%" />}
        />
      ))}
    </div>
  );
}


// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search