I wanted to know if I can send from one component to another property to define a state. Like a popup, I have a "Start now" button and I want to popup the reg form and make the "start now" button disappear and to close the popup in when I click on an logo img in the form. ex:

first component

function RegisterPage (props){
    return(
      <form className="All-Register">
        <div className="Register-Header">
          <img src={Logo} name="Logo" onClick={() => props.setIsOpen(!props.isOpen)}/>
        </div>
        <div className="Register-Form">
          <input type="text" placeholder="nick_name" />
          <input type="text" placeholder="email" />
          <input type="password" placeholder="pass" />
          <input type="submit" value="register" />
        </div>
        <div className="Forgot">
          <span>forgot pass</span>
        </div>
      </form>
    )
}
export default RegisterPage;

second component

function RegisterButton(){
  const [isOpen, setIsOpen] = useState(false);
  return(
    <div>
      {isOpen ? <RegisterPage isOpen = {isOpen} /> :
      <div className="HomeWrapper">
        <div className="para">
          <p>Build the strongest army</p>
          <p>and join the fight-club</p>
        </div>
        <div className="div-btn">
          <button className="Reg-Btn" onClick={() => setIsOpen(!isOpen)}>start now</button>
        </div>
      </div>
    }
    </div>
  );
}

export default RegisterButton;

ty for your help :)

CodePudding user response：

You have two ways -

1. Pass another prop setIsOpen then you can able to use the onClick function you define.
2. This way I prefer you to use. Create a function then use toggle there. Then pass that function to your register component as prop then call it from onClick on image. I hope you get my points.

CodePudding user response：

Add a new onLogoClick prop to RegisterPage which is attached the the onClick of the <img/>. Then bind this in the RegisterButton parent to a function which set the state to false.

function RegisterPage (props){
    return(
      <form className="All-Register">
        <div className="Register-Header">
          <img src={Logo} name="Logo" onClick={props.onLogoClick}/>
        </div>
        <div className="Register-Form">
          <input type="text" placeholder="nick_name" />
          <input type="text" placeholder="email" />
          <input type="password" placeholder="pass" />
          <input type="submit" value="register" />
        </div>
        <div className="Forgot">
          <span>forgot pass</span>
        </div>
      </form>
    )
}
export default RegisterPage;

function RegisterButton(){
  const [isOpen, setIsOpen] = useState(false);
  return(
    <div>
      {isOpen ? <RegisterPage isOpen={isOpen} onLogoClick={() => setIsOpen(false)}/> :
      <div className="HomeWrapper">
        <div className="para">
          <p>Build the strongest army</p>
          <p>and join the fight-club</p>
        </div>
        <div className="div-btn">
          <button className="Reg-Btn" onClick={() => setIsOpen(!isOpen)}>start now</button>
        </div>
      </div>
    }
    </div>
  );
}

export default RegisterButton;

CodePudding user response：

You can do something similar to

   {!isOpen ? (
          <button className="Reg-Btn" onClick={() => setIsOpen(!isOpen)}>
            start now
          </button>
        ) : null}