CODEWITHSUNDEEP
javascriptreactjsreact-hooks
meren
meren

Reputation: 442

How can I add multiple functions to the React js button?

I want to add startClick to BackButton as in NextButton. In other words, when the BackButton is clicked, the startClick function should work first, then the dispatch (giveForm2PreviousStep (props.currentStep, props.goToStep)) method should work in order. How can I do that?

Question JS

const Question = props => {
  const dispatch = useDispatch()
  const loading = useSelector(state => state.app.isLoading)
  const error = useSelector(state => state.app.error)
  const reduxF2 = useSelector(state => state.app.forms.f2)

  const [input, setInput] = useState({
    value: reduxF2.PastReceivables.value,
    valid: true,
  })

  const changeSelected = val => {
    setInput({ ...input, value: val })
  }

  useEffect(() => {
    setInput({ ...input, value: reduxF2.PastReceivables.value })
  }, [reduxF2.PastReceivables.value])

  useEffect(() => {
    if (reduxF2.bulkSaved && props.currentStep === 2) {
      dispatch(giveForm2NextStep(props.currentStep, props.goToStep))
      dispatch(resetForm2SavedStatus())
    }
  }, [reduxF2.bulkSaved])

  const startClick = e => {
    if (input.value === null || input.value === '') {
      setInput({ ...input, valid: false })
    } else {
      setInput({ ...input, valid: true })
      const questions = getPastReceivablesArray('PastReceivables', input.value, reduxF2)
      if (questions.length == 0) {
        dispatch(giveForm2NextStep(props.currentStep, props.goToStep))
      } else {
        dispatch(updateForm2(questions))
      }
    }
  }

  return (
    <>
      <MyProgressBar now='8' />
      <Question>Question here</Question>
      <QuestionForm>
        <NumericInput
          valid={input.valid}
          onChange={changeSelected}
          value={input.value}
        />
      </QuestionForm>

      <div className='d-flex justify-content-between'>
        <BackButton onClick={() => dispatch(giveForm2PreviousStep(props.currentStep, props.goToStep))} />
        <NextButton onClick={startClick} loading={loading} />
      </div>
      <Warning error={error} />
    </>
  )
}

BackButton JS

const BackButton = ({ text = 'Back', onClick = null, loading = false, width = '7.5rem' }) => {
  return (
    <Button
      variant='secondary'
      className='back-button'
      onClick={onClick}
      disabled={loading}
      style={{width}}
    >
      <MySpinner loading={loading} />
      {!loading && <>{text}</>}
    </Button>
  )
}

Upvotes: 1

Views: 181

Answers (2)

yashwanth numburi
yashwanth numburi

Reputation: 64

You can call multiple function in onclick or else you can send call backs to startclick. so the call backs will be executed after startclick. easy to give all the fucntions in onClick itself.

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281646

You can call multiple functions in onClick event like below

<BackButton 
    onClick={(e) => {
        startClick(e);
        dispatch(giveForm2PreviousStep(props.currentStep, props.goToStep))
    }} 
/>

Upvotes: 4

Related Questions