0

I am uncertain how to compare these two types. hive.inspection_date is returning on my console.log like 2022-06-10, when I try to compare it to DateTwo, it's not comparing as my console.log is returning (Tue May 31 2022 17:06:57 GMT-0400 (Eastern Daylight Time)). I am not sure how to convert these so they could compare and I can alert the user. Any suggestions?

import React, { useState } from "react"
import Alert from 'react-bootstrap/Alert'


const  DisplayAlert= (props) => {
    const [show, setShow] = useState(true);   
 
    let dateTwo = new Date();


    
    return (
        <>
        {console.log(dateTwo)}
    {props.hives.map((hive)=> {
        if (hive.inspection_date > dateTwo){
            return
        }
        else if (hive.inspection_date  <= dateTwo, show){
            
            // if (show) {
                
                {console.log(hive.inspection_date)}
                return (
                    <Alert variant="danger" onClose={() => setShow(false)} dismissible  key={hive.id}>
                <Alert.Heading >Oh snap! You got are running behind an Inspection for Hive number: {hive.hive_number} Inspection date of: {hive.inspection_date}</Alert.Heading>

            </Alert>
            );
        // }
    }
        //   return <button onClick={() => setShow(true)}>Show Alert</button>;
        }
    )}
    </>
    )
}
 
export default DisplayAlert;
CodingNewb
  • 119
  • 7
  • Does this answer your question? [JavaScript Date Object Comparison](https://stackoverflow.com/questions/7606798/javascript-date-object-comparison) – Rilla May 31 '22 at 21:39

1 Answers1

1

Your hive.inspection_date is returning a string, not a number; you can convert it to a Date using new Date(hive.inspection_date); then convert both date objects to a number using the +new Date(...) format →

import React, { useState } from "react"
import Alert from 'react-bootstrap/Alert'


const  DisplayAlert= (props) => {
    const [show, setShow] = useState(true);   
 
    let dateTwo = +new Date();
    // This needs to be converted to a `number`
    // if you want to use numeric comparison


    
    return (
        <>
        {console.log(dateTwo)}
    {props.hives.map((hive)=> {
        const inspection_date = +new Date(hive.inspection_date);
        // Generate a new Date object... Then convert it to a number

        if (inspection_date > dateTwo){
            return
        }
        else if (inspection_date  <= dateTwo, show){
            
            // if (show) {
                
                {console.log(inspection_date)}
                return (
                    <Alert variant="danger" onClose={() => setShow(false)} dismissible  key={hive.id}>
                <Alert.Heading >Oh snap! You got are running behind an Inspection for Hive number: {hive.hive_number} Inspection date of: {new Date(inspection_date)}</Alert.Heading>

            </Alert>
            );
        // }
    }
        //   return <button onClick={() => setShow(true)}>Show Alert</button>;
        }
    )}
    </>
    )
}
 
export default DisplayAlert;
Ephellon Grey
  • 392
  • 2
  • 9
  • This is a little closer, but I get this error react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: Mon May 16 2022 20:00:00 GMT-0400 (Eastern Daylight Time)). If you meant to render a collection of children, use an array instead. – CodingNewb May 31 '22 at 21:37
  • Be aware, the [_Date_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object defaults shortened formats to GMT – Ephellon Grey May 31 '22 at 21:38
  • It might be the line with `Alert.Heading` – Ephellon Grey May 31 '22 at 21:40
  • it was indeed the Alert.Heading inline, I removed that completely and it's now working perfectly! – CodingNewb May 31 '22 at 21:46