nested ternary cannot get local variable, react

Question

Edit Note: This referred to question does not actually solve my first problem, it was a matter of an extra {} around first ternary result. I replaced them with parenthesis. Josep's solution using getTime I ended up needing to equate the dates. the Date().setHours(0,0,0,0) I used on the real time date to equate to the user generated date which has 0 as hours, minutes, seconds, then .getTime()

Why can't hour access the const hour = this.state.date.getHours() of (state date = new Date()) inside constructor of the component, when I put it in the date === ternary? the hour nested ternary gets hour when on it's own in the jsx of react component. new Date(this.state.year, this.state.month, this.state.day) is used as the day selected by the user that sets state when the user selects it - so if it equals the current date, I want to render the image clockbordermoon or clockbordersun in the nested ternary.

I've tried a nested ternary inside an if statement's render but still couldn't reach hour

  {date === new Date(this.state.year, this.state.month, this.state.day) ?
    {hour === 20 ||
    hour === 21 ||
    hour === 22 ||
    hour === 23 ||
    hour === 0 ||
    hour === 1 ||
    hour === 2 ||
    hour === 3 ||
    hour === 4 ? (
      <img
        src={clockbordermoon}
        className="clockborder"
        style={{
          transform: `translate(-50%, -50%)rotate(${totaldegrees}deg)`
        }}
        alt="error"
      />
    ) : (
      <img
        src={clockbordersun}
        className="clockborder"
        style={{
          transform: `translate(-50%, -50%)rotate(${totaldegrees}deg)`
        }}
        alt="error"
      />
    )}
    : null}

how can I get hour to read const hour = this.state.date.getHours(), which is inside render before the divs & imgs?

this is my second question today, I should be set for a while after this one, sorry

full code (tentatively): https://codesandbox.io/s/zen-dijkstra-1c31n?fontsize=14 this component is src>UIConainers>Calendar>CalSlideDrawer.js, found by top-left logo icon (after pressing the inbox icon if you're starting on the purple screen)

Edit (error Unexpected token, expected "," after first hour was because I didn't need the brackets around the first result of the ternary):

class CalSlideDrawer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      day: new Date().getDate(),
      month: +new Date().getMonth() + 1,
      year: +new Date().getFullYear(),
    };
  }
//statefor 
   const monthname = Object.keys(CALENDAR_MONTHS)[
      Math.max(0, Math.min(month - 1, 11))
    ].toUpperCase();
   const weekdayname = new Date(this.state.year, this.state.month, this.state.day);
   const hour = this.state.date.getHours();
    return (
      {date.getTime() === weekdayname.getTime() ?
        (hour === 20 ||
        hour === 21 ||
        hour === 22 ||
        hour === 23 ||
        hour === 0 ||
        hour === 1 ||
        hour === 2 ||
        hour === 3 ||
        hour === 4 ? (
          <img
            src={clockbordermoon}
          />
        ) : (
          <img
            src={clockbordersun}
          />
        )): null}

Why not just use `if/else` blocks? My rule of thumb is if the ternary is more than three lines, it should probably go into a block... — Heretic Monkey, Sep 06 '19 at 19:10
I think ternaries are less code so if I can get the variable from within the nested ternary from it being defined in render before the divs & imgs, then I'll use it, if I can't I'll try if again but that didn't work when I tried it last so I think the issue is with hour,... or as Josep says maybe it's just because I didn't instantiate new Date() before using it to compare in a ternary — Nick Carducci for Carface Bank, Sep 06 '19 at 19:32
You may want to consider putting parentheses around all of those hour comparisons, or use an array (e.g., `[20,21,22,23,0,1,2,3,4].includes(hour)`). Also, I haven't used React that much, but I'm not sure you need all of the curly brackets... Finally, "less code" ranks below "understandable code" in most professional settings. — Heretic Monkey, Sep 06 '19 at 20:25
I think ternaries are just easier to read and they're less code. I'll try/research includes later but now I just want it to work — Nick Carducci for Carface Bank, Sep 07 '19 at 02:47

score 3 · Answer 1 · answered Sep 06 '19 at 19:14

3

I don't understand your question or what you are trying to do, but please notice that the following expression will always evaluate to false:

date === new Date(this.state.year, this.state.month, this.state.day)

because you are comparing a newly created reference with something else. For instance, this evaluates to false:

console.log(
  (new Date(2015,5,5)) === (new Date(2015,5,5))
)

And this evaluates to true:

    console.log(
      (new Date(2015,5,5)).getTime() === (new Date(2015,5,5)).getTime()
    )

Perhaps the problem has to do with the way that your are comparing the dates?

answered Sep 06 '19 at 19:14

Josep

12,926
2
42
45

you are saying I have to instantiate `new Date(this.state.year, this.state.month, this.state.day)` in a variable first before I `date` (which is an instantiated new Date()) === `new Date(this.state.year, this.state.month, this.state.day)` like `date===usersdate`? – Nick Carducci for Carface Bank Sep 06 '19 at 19:28
I edited the question with a better version of the code so you know where everything comes from, sorry about that, instantiating new Date() first before using it in ternary still same error `Unexpected token, expected "," after first hour` – Nick Carducci for Carface Bank Sep 06 '19 at 19:45
Might want to read this (and the duplicate question's answers) again. Basically, you can't compare `Date` objects with `==` or `===` because they do object reference comparisons, not value comparisons. Use `getTime()` as shown here, or `valueOf()`... – Heretic Monkey Sep 06 '19 at 20:17
the same error is produced `Unexpected token, expected ","` for first hour...`{date.getTime() === weekdayname.getTime() ? {hour === 20 || hour === 21 ? ( ) : ( )}: null}` – Nick Carducci for Carface Bank Sep 06 '19 at 21:34
I'm going to leave my codesandbox on the error page for you for the early evening – Nick Carducci for Carface Bank Sep 06 '19 at 21:54
It gave the same error at the hour variable regardless if .getTime is used... usually if there is a problem with two things the first would showcase the error. with or without get time it says the same error, after the first ternary. that can't be the problem – Nick Carducci for Carface Bank Sep 07 '19 at 02:25

nested ternary cannot get local variable, react

1 Answers1