How to create a conditional handler/button-CodePudding

I'm working on an e-commerce website, and I'm trying to create a button/handler that only appears when the current date is less than or equal to 30 days from the deliveryAt. I tried doing this by placing my handler within an if/else statement, but it doesn't seem like I did this correctly since I'm getting a warning saying that I'm missing my addToDevolucionHandler. I would really appreciate any help or guidance on how to properly do this. Thank you!

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { listOrderMine, detailsOrder } from '../actions/orderActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import {createReturn } from '../actions/returnActions';
//import  {orderItems} from '../screens/OrderScreen';
import { RETURN_CREATE_RESET } from '../constants/returnConstants';

export default function OrderHistoryScreen(props) {
  const order = useSelector((state) => state.order);
  const returnCreate = useSelector((state) => state.returnCreate);
  const {success, returned } = returnCreate;
  
  const orderMineList = useSelector((state) => state.orderMineList);
  const { loading, error, orders } = orderMineList;
  console.log({orders});
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(listOrderMine());

  }, [dispatch]);
  
  
  const created = new Date('createdAt');
  const today = new Date();
  
  const thirtyDays = 30 * 24 * 60 * 60 * 1000;
  
  const timeDiff = today.getTime() - created.getTime();
  
  if(timeDiff <= thirtyDays){
    const addToDevolucionHandler = (orderId) => {
      props.history.push(`/make-return/${orderId}`);
  }
}
  else{
      console.log('Date is older than 30 days');
  }



  return (
    <div>
      <h1>Order History</h1>
      {loading ? (
        <LoadingBox></LoadingBox>
      ) : error ? (
        <MessageBox variant="danger">{error}</MessageBox>
      ) : (
        <table className="table">
          <thead>
            <tr>
              <th>ID</th>
              <th>DELIVERED</th>
              <th>ACTIONS</th>
            </tr>
          </thead>
          <tbody>
            {orders.map((order) => (
              <tr key={order._id}>
                <td>{order._id}</td>
                <td>
                  {order.isDelivered
                    ? order.deliveredAt.substring(0, 10)
                    : 'No'}
                </td>
                
                <td>
                <button
                  onClick={()=>addToDevolucionHandler(order._id)}
                  className="primary block"
                   >
                  Make a Return
                 </button>
                </td>
             
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

CodePudding user response：

In your code, the addToDevolucionHandler is only visible in the if scope, and not visible at the outer scope at return.

You can modify it by creating the function in the outer layer like this:

const addToDevolucionHandler = (orderId) => {
  if(timeDiff <= thirtyDays){
    props.history.push(`/make-return/${orderId}`);
  }
  else{
      console.log('Date is older than 30 days');
  } 
  }

This way, the function is always created in the body of the functional component, you handle the if condition within the addToDevolucionHandler function.