title: nested ternary cannot get local variable, react
body: <p>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()</p>
  
  <p>Why can't <code>hour</code> access the <code>const hour = this.state.date.getHours()</code> 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. <code>new Date(this.state.year, this.state.month, this.state.day)</code> is used as the day selected by the user that sets state when the user selects it - so if it equals the current <code>date</code>, I want to render the image <code>clockbordermoon</code> or <code>clockbordersun</code> in the nested ternary. </p>
  
  <p>I've tried a nested ternary inside an if statement's render but still couldn't reach <code>hour</code></p>
  
  <pre><code>  {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 ? (
        &lt;img
          src={clockbordermoon}
          className="clockborder"
          style={{
            transform: `translate(-50%, -50%)rotate(${totaldegrees}deg)`
          }}
          alt="error"
        /&gt;
      ) : (
        &lt;img
          src={clockbordersun}
          className="clockborder"
          style={{
            transform: `translate(-50%, -50%)rotate(${totaldegrees}deg)`
          }}
          alt="error"
        /&gt;
      )}
      : null}
  </code></pre>
  
  <p>how can I get <code>hour</code> to read <code>const hour = this.state.date.getHours()</code>, which is inside render before the divs &amp; imgs?</p>
  
  <p>this is my second question today, I should be set for a while after this one, sorry</p>
  
  <p>full code (tentatively):  <a href="https://codesandbox.io/s/zen-dijkstra-1c31n?fontsize=14" rel="nofollow noreferrer">https://codesandbox.io/s/zen-dijkstra-1c31n?fontsize=14</a> 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)</p>
  
  <p>Edit (error Unexpected token, expected "," after first hour was because I didn't need the brackets around the first result of the ternary):</p>
  
  <pre><code>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 ? (
            &lt;img
              src={clockbordermoon}
            /&gt;
          ) : (
            &lt;img
              src={clockbordersun}
            /&gt;
          )): null}
  </code></pre>