Search code examples
javascriptreactjsconditional-operator

React ternary operator how to call 2 functions?


How can i call two functions in a ternary operator? I tried it by adding a && but then it does only call the first function and ignores the second.

e.g.
setState(date) && dispatch(paypal_error({ time: date }))

Here is the full code

const handleDateChange = (date) => {
    setDisablePing(true);
    const minutes = parseInt(dayjs(date).format('HH') * 60) +
      parseInt(dayjs(date).format('m'))

     if(minutes > pauseStartMin && minutes < pauseEndMin){
setState(
          new Date(0, 0, 0, pauseEndHour, pauseEndMinute + deliveryTime)
        ),
        dispatch(
          paypal_error({
            time: new Date(
              0,
              0,
              0,
              pauseEndHour,
              pauseEndMinute + deliveryTime
            ),
          }),
        
        toast.error(
          `Zurzeit Pause. Bestellungen ab ${dayjs(
            newPauseEndHour.toString(),
            'H'
          ).format('HH')}:${dayjs((newPauseEndMin + 1).toString(), 'm').format(
            'mm'
          )} Uhr wieder möglich`,
          {
            position: toast.POSITION.BOTTOM_RIGHT,
          }
        )
     }else{
      setState(date);
      dispatch(paypal_error({ time: date }))
     }
  };

Solution

  • Use the comma operator.

    (setState(date), dispatch(paypal_error({ time: date })))
    

    You have JSX in your function that doesn't belong there. Remove it:

    const handleDateChange = (date) => {
        parseInt(dayjs(date).format('HH') * 60) +
            parseInt(dayjs(date).format('m')) >
            pauseStartMin &&
            parseInt(dayjs(date).format('HH') * 60) +
            parseInt(dayjs(date).format('m')) <
            pauseEndMin ? (
            setState(new Date(0, 0, 0, pauseEndHour, pauseEndMinute + deliveryTime)),
            dispatch(paypal_error({
                time: new Date(
                    0,
                    0,
                    0,
                    pauseEndHour,
                    pauseEndMinute + deliveryTime
                ),
            }))
        ) : (
            setState(date), dispatch(paypal_error({ time: date }))
        );
    };
    

    But you don't need the ternary operator here, just use if-else, it's easier to read:

    const handleDateChange = (date) => {
        const minutes = parseInt(dayjs(date).format('HH') * 60) +
            parseInt(dayjs(date).format('m'));
        if (minutes > pauseStartMin &&
            minutes < pauseEndMin) {
            setState(new Date(0, 0, 0, pauseEndHour, pauseEndMinute + deliveryTime));
            dispatch(paypal_error({
                time: new Date(
                    0,
                    0,
                    0,
                    pauseEndHour,
                    pauseEndMinute + deliveryTime
                ),
            }));
        } else {
            setState(date);
            dispatch(paypal_error({ time: date }));
        };
    };