Unable to conditionally render a div in react

Question

I'm attempting to conditionally show a horizontal rule in an if statement. However, this doesn't seem to display anything.

My console logs print all the dates and the comparison outputs either False or True as expected. And yet no render.

const todayDate = new Date();
const mm = todayDate.getMonth() + 1;
const dd = todayDate.getDate();
const yy = todayDate.getFullYear();
const myDateString = yy + '-' + mm + '-' + dd; //(US)
const currentNarratives = narrativesState.narratives?.sort((a, b) => a.date < b.date ? 1 : -1);

return (
        <>


        <div className="div-left">
        {
            datesarray.map(date => {

                console.log("Current Date: ",myDateString)
                console.log("Narrative Date: ", date)
                console.log(myDateString > date)
                if(myDateString == date){
                  <div>IN HERE</div>
                }


                // check if there are any references to report
                return currentNarratives.length > 0
                    ? (
                                <Card>
                                    <div>
                                            <DateHeader date={date} />
                                            {currentNarratives.map(narrative => (
                                                <div className="referencecontainer">
                                                <div className="float-left overflow">
                                                        <Narrative id={narrative.id} title={narrative.title} scheduled={narrative.scheduled}/>
                                                </div>
                                                </div>
                                            ))}
                                    </div>
                            </Card>

                        )
                    : null;


        })}

        </div>
        </>
  );

Answer 1

Your div is not getting rendered because you're not returning it in the .map() function. Whatever you return from the map() function will be rendered by react.

So, move your div in the return statement.

return (
  <>
    <div className="div-left">
      {datesarray.map((date) => {
        console.log('Current Date: ', myDateString);
        console.log('Narrative Date: ', date);
        console.log(myDateString > date);

        return (
          <>
            {/* MOVE DIV HERE */}
            {myDateString == date && <div>IN HERE</div>}
            {currentNarratives.length > 0 ? (
              // check if there are any references to report
              <Card>
                <div>
                  <DateHeader date={date} />
                  {currentNarratives.map((narrative) => (
                    <div className="referencecontainer">
                      <div className="float-left overflow">
                        <Narrative
                          id={narrative.id}
                          title={narrative.title}
                          scheduled={narrative.scheduled}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </Card>
            ) : null}
          </>
        );
      })}
    </div>
  </>
);