Update enpoint based on datepicker selection (ReactJS)

Question

I'm trying to update the parameters of an endpoint based on the date picker selection. I'm working on ReactJS and DatePicker for React For example something like this

const res = await axiosConfig.get(`/${startTimeStamp}/posts`)

But I'm getting an error undefined startTimeStamp

How I should retrieve this?

This is my code:

const MainCalendar = (props) => {
    const [isLoading, setLoading] = useState(true)
    const [data, setData] = useState([])
    const [startDate, setStartDate] = useState(new Date());

    //--- Start
    const minDate = () => {
        const dateStart = new Date(startDate)
        dateStart.setDate(dateStart.getDate() - 1);
        dateStart.setHours(23, 0, 0, 0);
        // TS
        const startTimeStamp = moment(dateStart).format("x")
        console.log('TS', startTimeStamp)
    }


    useEffect(() => {
        loadData()
    }, [])

    const loadData = async () => {
        const res = await axiosConfig.get(`/${startTimeStamp}/posts`)
        console.log('dbg1', startTimeStamp)
        setData(res.data)
        setLoading(false)
    }

    return (
        <>
            {
                isLoading ? <Loader />
                    : (
                                <DatePicker
                                    selected={startDate}
                                    onChange={(date) => {setStartDate(date); minDate()}}

                                />
                    )}
        </>
    );
};

export default MainCalendar;

Answer 1

Your code doesn't work because startTimeStamp is a constant which is defined inside minDate function. constants are block scoped. They will be available only inside the block that they were defined in.

An ideal approach would be to define it as a state variable.

const MainCalendar = (props) => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [startDate, setStartDate] = useState(new Date());
  const [startTimeStamp, setStartTimeStamp] = useState(null);

  //--- Start
  const minDate = () => {
    const dateStart = new Date(startDate);
    dateStart.setDate(dateStart.getDate() - 1);
    dateStart.setHours(23, 0, 0, 0);
    // TS
    setStartTimeStamp(moment(dateStart).format("x"));
  };

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    const res = await axiosConfig.get(`/${startTimeStamp}/posts`);
    console.log("dbg1", startTimeStamp);
    setData(res.data);
    setLoading(false);
  };

  return (
    <>
      {isLoading ? (
        <Loader />
      ) : (
        <DatePicker
          selected={startDate}
          onChange={(date) => {
            setStartDate(date);
            minDate();
          }}
        />
      )}
    </>
  );
};

export default MainCalendar;