Question 184624 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I change prop value in react component to close my popup?

I’m trying to make a popup functionality but without Redux.

My popup component gets a prop called activePopup and width values true or false.
When it’s true, my popup is showing up, but I can’t change this prop to false for
closing this popup, because activeProp can be change only in the parent component.

const Popup = ({ isActive }) => {

  return (
    <div className={isActive ? "popup" : ""}>
      <div className="popupContent">
        <h2>
          Welcome to popup!
          <button title="close popup">X</button>
        </h2>

        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio neque
          cupiditate officiis cum rem iste aliquam ut ipsum quidem non, aperiam
          eos harum similique, architecto a minus explicabo atque error.
        </p>
      </div>
    </div>
  );
};

I trying to fix my popup component so that he/she can work like I want. Because my popup can open, but it can’t close inside the component.

Tags:

3

Answers


  1. 0

    Transfer the state that is (probably) managed in your parent component into the local state of the component via hooks.

    import React, {useState} from 'react'

const Popup = () => {
  const [isActive, setIsActive] = useState(false)

  return (
    <div className={isActive ? "popup" : ""}>
      <div className="popupContent">
        <h2>
          Welcome to popup!
          <button title="close popup" onClick={() => setIsActive(false)}>X</button>
        </h2>

        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio neque
          cupiditate officiis cum rem iste aliquam ut ipsum quidem non, aperiam
          eos harum similique, architecto a minus explicabo atque error.
        </p>
      </div>
    </div>
  );
};
    Login or Signup to reply.
  2. 0

    four-eyes’s answer is good, except you can’t control the popup from the parent anymore. You can just pass the state and the state-setter as props and merge your code with four-eyes' code.

    Parent Component:

    const ParentComponent = ({ isActive, setIsActive }) => {
    const [isActive, setIsActive] = useState(false)

    return (
        <div>
            <button onClick={()=> setIsActive(true)}> Open Popup </button>
            <Popup isActive={isActive} setIsActive={setIsActive} />
        </div>
    )

}

    Popup component

    const Popup = ({ isActive, setIsActive }) => {

  return (
    <div className={isActive ? "popup" : ""}>
      <div className="popupContent">
        <h2>
          Welcome to popup!
          <button title="close popup" onClick={() => setIsActive(false)}>X</button>
        </h2>

        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio neque
          cupiditate officiis cum rem iste aliquam ut ipsum quidem non, aperiam
          eos harum similique, architecto a minus explicabo atque error.
        </p>
      </div>
    </div>
  );
};

    So now you can control the state from in and out of the component

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

Back To Top
Search