I have a There is a problem with implementing the model window in the react

Question

I am currently implementing a modal window. If I click the icon on the navigation bar, the background is blurred and the modal window appears. I changed the value of passedMake to false when I clicked X to close the modal window. But even if I click X, the modal window doesn't close. When I checked with console, the value of passedMake changes to false when I click X, but then value comes out true twice and the modal window doesn't close. The question is why the true value is printed twice after false value is checked when X is clicked. I don't know which part is the problem. I will attach a picture of the value in the console. I erased the unnecessary parts as much as I can to make the code easier to understand. I'd appreciate it if you let me know thanks!

NavigationBar:

this is navigation bar file. I pass the value to parent component if Icon is clicked

import React, { useState } from 'react'
import styled from 'styled-components';


const NavigationBarWrap1 = styled.div`
  position: fixed;
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;


  .NavigationBarSection1Wrap2 {
    opacity: 1;
    display: block;
    color: rgb(38,38,38);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 18px;
    direction: ltr;
  }

  .IconWrap3 {
    position: relative;
    display: block;
  }

  .IconWrap4 {
    text-decoration: none;
    color: rgb(0,55,107);
    box-sizing: border-box;
    display: inline;
    background-color: transparent;
    cursor: pointer;
  }

  .IconWrap5 {
    border-bottom-left-radius: 24px;
    padding-right: 12px;
    align-items: center;
    padding-top: 12px;
    width: 100%;

  }

  .IconWrap6 {
    position: relative;
    flex: 0 0 auto;
    justify-content: flex-start;
    flex-direction: column;
  }

  .IconWrap7 {
    box-sizing: border-box;
    height: 24px;
    width: 24px;
  }
`

function NavigationBar({toParentIsMake,}) {

  //state declare
  const[make,setMake] = useState(false);

  const setTrueMake = () => {
    setMake(true)
  }

   const forMake = (e) => {
    setTrueMake();
   }


   //pass value to parent
   toParentIsMake(make);

  return (
    
      
        
          
            {forMake();}} className='IconWrap5'>
              
                
                  
                    {make===true?
                    <>
                      
                    :
                    <>
                      
                    }
                  
                
              
            
          
        
      
    
  )
}

export default NavigationBar;

HomePage.jsx:

and this is homepage file I'm trying to implement modal window. When Icon of navigation bar is clickd, background color becomes blur and modal window appears.

import React, { useEffect } from 'react'
import styled from 'styled-components';
import NavigationBar from '../components/NavigationBar';
import { useState } from 'react';


function HomePage() {

  //receive value from chid
  const[passedMake,setPassedMake] = useState(false);

  const toParentIsMake = (isMakeClick) => {
    setPassedMake(isMakeClick)
  }

  console.log('passedMake' , passedMake)

  //if click X, close modal
  const noModal = (e) => {
    setPassedMake(false)
  }

  return (
    <>
      
        
      
      
        {noModal();}} className='X'>
          
            
              
            
          
        
      
    
  )
}

export default HomePage;


const HomepageWrap = styled.div`
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  flex-direction: row;
  overflow-y: visible;
  align-content: stretch;
  border-bottom-left-radius: 0;
  background-color: rgb(250,250,250);
  border-bottom-right-radius: 0;
  position: static;
  justify-content: space-between;
  overflow-x: visible;
  align-self: auto;
  flex-grow: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
`

const Modal = styled.div`
  display: ${props=>props.passedMake===true?'block':'none'};
  position: fixed;
  background-color: rgba(0,0,0,0.65);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500343;

  .X {
    top: 10px;
    right: 10px;
    position: absolute;
    cursor: pointer;
  }

  .X2 {
    padding: 8px;
    justify-content: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .X3 {
    justify-content: center;
    display: flex;
    flex-direction: column;
  }
`

kil · Accepted Answer

I'm not quite sure what the exact issue is because your code is pretty confusing, but if I were to guess the issue is probably that lone call to toParentShowMake(make) in NavigationBar.

It seems to me that that call is supposed to pass an event to HomePage, which then updates its state to match that of the NavigationBar; that's not how you're supposed to do it.

You're duplicating the state that controls whether or not the modal should be shown, and that is just asking for problems.

Instead, you should keep the state that controls the modal in HomePage:

function HomePage () {
  const [ showModal, setShowModal ] = useState(false)
  const show = () => setShowModal(true)
  const hide = () => setShowModal(false)

  return (
    <>
      
        
      

      
        
          {/* ... */}
        
      
    
  )
}

Then in NavigationBar, accept a callback that will update that state:

function NavigationBar({ onShowModal }) {
  return (
    
      
        {/* ... */}
      
    
  )
}

This way, there's only one place that controls the Modal, the HomePage in which it lives.

I have a There is a problem with implementing the model window in the react

Answers (1)

Related Questions