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

Question

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.

Answer 1

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