vendredi 14 mai 2021

React Js Multiple Modal

Hi i'm trying to learn react and i was tryign to make multiple modal but the same desgine and everything but different content inside it how?

import './Works.css';
import React, { useState } from 'react'
import Modal from '../Modal/Modal'

function Works(props){
const [isOpen, setIsOpen] = useState(false)
return(
    <div>
        <div className={props.NameClass}>
            <h1>{props.icon}</h1>
            <h1>{props.title}</h1>
            <p >simple pargraph</p>
            <button className="button_more" onClick={() => setIsOpen(true)}><i className="fas fa-caret-right"></i></button>
        </div>
        <Modal open={isOpen} title="hi" onClose={() => setIsOpen(false)}>
         </Modal>
    </div>
)
}

export default Works

and if you look at <Modal open={isOpen} title="here i wanna different title" onClose={() => setIsOpen(false)}>

and here the App.js calling the file on top multiple times but i wanna for example if someone click on the second project it change the title to for example "hi you're in the second modal!"

<div class="Div-Projects">
          <Works NameClass="First_Project" icon="💳" title="first" />
          <Works NameClass="Second_Project" icon="🎓" title="second" />
          <Works NameClass="Third_Project" icon="đŸ‘©đŸ»‍đŸ’»" title="third" />
     </div>

and here the modal code!

import './Modal.css'

 function Modal({open , title,  onClose}){
if(!open) return null
return(
    <div className="popup">
    <div className="content">
        <h1>{title}</h1>
        <div className="p">
            <p>login system for students attendees with an arduino and python it shows how fast and stable for doing the job.login system for students attendees with an arduino and python it shows how fast and stable for doing the job.login system for students attendees with an arduino and python it shows how fast and stable for doing the job.</p>
        </div>
        <div className="buttons">
            <button className="dismiss" onClick={onClose}>Dismiss!</button>
            <button className="github" onClick={() => window.open( 'https://github.com/Majiedo/Login_System')}><i className="fab fa-github"></i></button>
            <button className="code"><i className="fas fa-code"></i></button>
        </div>
    </div>
</div>
)
}

 export default Modal

Aucun commentaire:

Enregistrer un commentaire