React js calculate dates from date inputs

Question

Spent most of the day trying to code this function. I have a react app I am building a PERN stack. I have a form that has many date inputs. I have two date columns and then a total days column. I am trying to get the user input and then display the difference in days.

This is the dateForm.js component

import React, { useState } from 'react'

const DatesForm = () => {

     const [preliminaryStart, preliminaryEnd] = useState();
     const [preliminaryEnd, setFcbcToWitEnd] = useState();

     const diffDays = (s, e) => {
         if(s !== null) {
            start = new Date(s.value);
            end = new Date(e.value);
         return ((end - start) / (1000 * 60 * 60 * 24));
         }
         return '0';
     }

return (
    <>
        <div className="form-container">
            <form action="">
                <h1>Dates</h1>                
                <div className="row-nb">
                {/* Row 2 Column 1 */}
                    <h3 className="form-title-headers">PRELIMINARY REVIEW TIME</h3>
                    <div className="nbcol-3">
                        <div className="form-group">
                            <label htmlFor="preliminary-review-start">START</label>
                            <input type="date" className="form-control" id="preliminary-review-start"/>
                        </div>
                    </div>
                    {/* Row 2 Column 2 */}
                    <div className="nbcol-3">
                        <div className="form-group">
                            <label htmlFor="preliminary-review-end">END</label>
                            <input type="date" className="form-control" id="preliminary-review-end"/>
                        </div>
                    </div>
                    {/* Row 2 Column 3 */}
                    <div className="nbcol-3">
                        <div className="form-group">
                            <label htmlFor="total-time">TOTAL TIME IN STAGE</label>
                            <p className="total-time" id="preliminary-review-total">{diffDays(preliminaryStart, preliminaryEnd)}</p>
                        </div>
                    </div>
                </div>
    </>

Nikita Galibin · Accepted Answer · 2021-01-08 00:57:18Z

You are declaring the states but never changing them, meaning your states are undefined from beginning and never change no matter what user input is. Also your state declaration is wrong. There are other mistakes and you should probably brush up on fundamentals of both js and react. But anyways here the code that should work.

import React, { useState, useEffect } from "react";

const DatesForm = () => {
  const [preliminaryEnd, setPreliminaryEnd] = useState(null);
  const [preliminaryStart, setPreliminaryStart] = useState(null);
  const [timeDiff, setTimeDiff] = useState(0);

  useEffect(() => {
    if (preliminaryEnd !== null && preliminaryStart !== null) {
      let start = new Date(preliminaryEnd);
      let end = new Date(preliminaryStart);
      setTimeDiff((end - start) / (1000 * 60 * 60 * 24));
    }
  }, [preliminaryEnd, preliminaryStart]);
  return (
    <>
      <div className="form-container">
        <form action="">
          <h1>Dates</h1>
          <div className="row-nb">
            {/* Row 2 Column 1 */}
            <h3 className="form-title-headers">PRELIMINARY REVIEW TIME</h3>
            <div className="nbcol-3">
              <div className="form-group">
                <label htmlFor="preliminary-review-start">START</label>
                <input
                  type="date"
                  className="form-control"
                  id="preliminary-review-start"
                  onChange={(e) => setPreliminaryStart(e.target.value)}
                />
              </div>
            </div>
            {/* Row 2 Column 2 */}
            <div className="nbcol-3">
              <div className="form-group">
                <label htmlFor="preliminary-review-end">END</label>
                <input
                  type="date"
                  className="form-control"
                  id="preliminary-review-end"
                  onChange={(e) => setPreliminaryEnd(e.target.value)}
                />
              </div>
            </div>
            {/* Row 2 Column 3 */}
            <div className="nbcol-3">
              <div className="form-group">
                <label htmlFor="total-time">TOTAL TIME IN STAGE</label>
                <p className="total-time" id="preliminary-review-total">
                  {timeDiff}
                </p>
              </div>
            </div>
          </div>
        </form>
      </div>
    </>
  );
};

Here sandbox: https://codesandbox.io/s/react-fix-83jw6?file=/src/index.js.

Collectives™ on Stack Overflow

React js calculate dates from date inputs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related