React multiple modal in one web page with different buttons-CodePudding

The advanced Search modal and the add modal are not opening at all. I am learning react for the first time so please help. Thanking you in advance.

App.js:

import React,{ useState } from 'react'
import Logo from './components/Logo.js'
import './App.css'
import PredictBtn from './components/PredictBtn.js'
import Analytics from './components/AnalyticsView.js'
import Advsrchmodal from './components/Advsrchmodal.js'
import Search from './components/Search.js'
import Add from './components/Addmodal.js'
export default function App(){
  const [showAdd, setShowAdd] = useState(false);
  const [showAdvanced, setShowAdvanced] = useState(false);
  return(
    <div>
      <body>
      <Logo />
      <div className='header-btns'>
      <PredictBtn/><Analytics/>
      <button onClick={()=> setShowAdvanced(true)} className="leftbtns adv-srch-btn"id="adv-srch-modal">ADVANCED SEARCH</button>
      <Advsrchmodal onClose={()=> setShowAdvanced(false)} show={showAdvanced}/>
      <Search />
      
      <button onClick={()=> setShowAdd(true)} className="rightbtns add-btn" id ="add-modal">ADD</button>
      <Add onClose={()=> setShowAdd(false)} show={showAdd}/>
      </div>
      </body>
    </div>
  )
}

Add Modal.js:

import React from 'react'

const Addmodal= props => {
    if(!props.showAdd){
      return null
  }
  return (
    <div className='modal overlay' id= 'add-modal '>
      <div className="modal-content" id= 'add-modal '>
            <div className="modal-header" id= 'add-modal '>
                <h4 className="modal-title" id= 'add-modal '>Add</h4>
            </div>
            < div className="modal-body" id= 'add-modal '>
                <input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
                <input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
                <input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
                <input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
                <input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
                <input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
                <input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
                <input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
            </div>
            <div className="modal-footer" id= 'add-modal '>
                <button className="addbtn " id= 'add-modal '>ADD</button>
                <button className="cancel" id= 'add-modal ' onClick={props.onClose}>CANCEL</button>
            </div>
      </div>
    </div>
  )
}

export default Addmodal

Advsrchmodal.js:

import React from 'react'

const Advsrchmodal = props=> {
    if(!props.showAdvanced){
        return null
    }
    return (
    <div className='modal overlay' id="adv-srch-modal" >
        <div className="modal-content"id="adv-srch-modal">
            <div className="modal-header"id="adv-srch-modal">
                <h4 className="modal-title"id="adv-srch-modal"> Advance Search</h4>
            </div>
            < div className="modal-body"id="adv-srch-modal">
                <input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
                <input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
                <input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
                <input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
                
            </div>
            <div className="modal-footer"id="adv-srch-modal">
                <button className="advsrchbtn"id="adv-srch-modal">SEARCH</button>
                <button className="cancel"id="adv-srch-modal" onClick={props.onClose}>CANCEL</button>
            </div>
        </div>
    </div>
    )
}

export default Advsrchmodal

The advanced Search modal and the add modal are not opening at all. I am learning react for the first time so please help. Thanking you in advance.

CodePudding user response：

You are passing the props as show so you have to access it with its name

if(!props.show){
    return null
}

try this in both modal components

CodePudding user response：

You should remove most of the code and try to understand what is happening. Go with piece by piece. Your basic idea seems to be okay, but it is lacking some knowledge on the react side. What I would do is that the parent view is responsible for showing the modal and not the component itself. Just look at my simple example which I created https://codesandbox.io/s/cold-shape-wqv1by?file=/src/ModalEample.jsx

use state for toggling if the modal is open or not. Use the main view for deciding if the modal should be seen or not. Then pass the toggle to the modal component. Use destructuring for getting the props. I suppose most of the stuff are new for you, but to understand what is happening and why you should first remove some code and go with piece by piece. Remove the other modal and start working with only one modal.