Question 350459 in Html Question posted in
Some basic documentation can be found here.

Html – popup model is not closing react js

I have created one component. in which I have a button in which once you click popup will be displayed. data for that popup is put in another component. below is the popup.


function Places() {
  const [showModel, setShowModel] = useState(null)

  const handleToggleModel = (value) => {
    setShowModel(value)
  }

  return (
  <div className='hotel-container'>
        <div
          className='hotel-container_groupA'
          onClick={() => handleToggleModel(auli)}
        >
          <Article imgUrl={auli} date='Sep 26, 2021' text='Aoli' />
          {showModel === auli && (
            <Model onClose={() => handleToggleModel(null)}>
              <div>
                <img src={auli} alt='#' />
              </div>
            </Model>
          )}
        </div>
)

now on the close button component

const Model = ({ children, onClose }) => {


  return (
    <div className='model'>
      <div className='model-content'>
        {children}
        <button onClick={onClose}>Close</button>

      </div>
    </div>
  )
}
Tags:

2

Answers


  1. 0

    Issue here is your onClick for setting the showModel state to auli coinciding with close button on your popup. You should move the Model component out of div.

    export function Places() {
  const [showModel, setShowModel] = useState(null)
  const handleToggleModel = (value) => {
    setShowModel(value)
  }

  return (
  <div className='hotel-container'>
    <div
      className='hotel-container_groupA'
      onClick={() => handleToggleModel(auli)}
    >
    <Article imgUrl={auli} date='Sep 26, 2021' text='Aoli' />  
    </div>
    {showModel === auli && (
      <Model onClose={() => handleToggleModel(null)}>
        <div>
          <img src={auli} alt='#' />
        </div>
      </Model>
    )}
  </div>
)}
    Login or Signup to reply.
  2. 0

    To fix the issue with the modal not closing in your React component, the primary aspect to check is the interaction between your handleToggleModel function and the onClose prop in the Model component. The goal is to ensure that when the close button is clicked, the showModel state is set to null, which should hide the modal.

    Here’s a revised version of your Places and Model components with some suggestions:

    Places Component

    function Places() {
  const [showModel, setShowModel] = useState(null);

  const handleToggleModel = (value) => {
    setShowModel(value);
  };

  return (
    <div className='hotel-container'>
      <div
        className='hotel-container_groupA'
        onClick={() => handleToggleModel(auli)}
      >
        <Article imgUrl={auli} date='Sep 26, 2021' text='Aoli' />
        {showModel === auli && (
          <Model onClose={() => handleToggleModel(null)}>
            <div>
              <img src={auli} alt='Auli' />
            </div>
          </Model>
        )}
      </div>
    </div>
  );
}

    Model Component

    const Model = ({ children, onClose }) => {
  return (
    <div className='model'>
      <div className='model-content'>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
};

    Key Points to Consider

    1. State Management: Ensure setShowModel is properly toggling the state between null and the value (auli in this case). When null, the modal should not display; when auli, it should.
    2. Event Propagation: When clicking the close button, ensure that event propagation is not causing issues. You can stop event propagation by adding event.stopPropagation() in the onClick handler within the Model component if necessary.
    3. Conditional Rendering: Your conditional rendering logic ({showModel === auli && }) seems correct. Ensure that auli is a value that uniquely identifies the modal content and is not causing any conflicts or unexpected behavior.
    4. Debugging: If the modal still doesn’t close, add console.log statements inside your handleToggleModel function and the onClick handler of the close button to ensure they are being triggered as expected.

    By ensuring that the handleToggleModel function properly sets the state, you should be able to show and hide the modal as expected. If there are still issues, you may want to inspect the value of showModel and the logic that determines when it gets updated.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search