Reactjs hooks to run function in parent from child-CodePudding

I have a parant that contains a child and a function within the parent that I wish to run form the child. However with the current code what is happening is the function is ran instantly instead of when the button is pressed on the child component. any ideas? Here is the code:

const Parent  = () => {

const [showPayment, setShowPayment] = useState(true);
const [showSignupComplete, setShowSignupComplete] = useState(false);

const CompleteSignup = () => {
  setShowPayment(false);
  setShowSignupComplete(true);
}
 
return (
<div>
{showPayment ?(
      <Payment paymentChange={CompleteSignup}/>
):null }

{showSignupComplete ?( 
  <div> Sign up complete </div>
):null }
</div>
}

const Payment = ({paymentChange}) => { 
  const handleSubmitSub = async (event) => {
  paymentChange
  }

return (
 <div>
 <Button
          type="submit"
          fullWidth
          variant="contained"
          color="primary"
          className="submit"
           onClick={handleSubmitSub}
           >
            Complete Payment
          </Button>
       </div>
)

}

I've updated the code with the suggestions below. however get the error: paymentChange is not a function

CodePudding user response：

I reformatted your code for better readability It actually works. completeSignup is called in Payment and it changes states in Parent

The only thing I fixed is handleSubmitSub in Payment component

In handleSubmitSub you should call paymentChange as a function() Like this

const handleSubmitSub = async (event) => {paymentChange()}

Full code:

const Parent  = () => {
  const [showPayment, setShowPayment] = useState(true);
  const [showSignupComplete, setShowSignupComplete] = useState(false);

  const completeSignup = () => {
      setShowPayment(false);
      setShowSignupComplete(true);
  }

  return (
    <div>
      {showPayment && <Payment paymentChange={completeSignup}/>}
      {
        showSignupComplete && 
        <div> Sign up complete </div>
      }
    </div>
  )   
}

const Payment = ({paymentChange}) => { 
  const handleSubmitSub = async (event) => {paymentChange()}

  return (
    <div>
      <button
          type="submit"
          fullWidth
          variant="contained"
          color="primary"
          className="submit"
           onClick={handleSubmitSub}
           >
            Complete Payment
        </button>
    </div>
  )
}

P.S: I'd recommend naming functions inside components with a lower camelCase = () => {}, so those functions will not be misread as a react Component = () => {}

CodePudding user response：

Your naming is a bit confucing here, that onClick you put on the component is not an actual event handler, it's a prop. You have to accept the "handleSubmitSub" function in the child component as props.

In the child component do the following:

const Button = ({onClick as fn}) => {

/// your code here.....

return (
<button onClick={fn}>YOUR BUTTON TEXT</button>
)

}