Reputation: 1273
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>
</>
);
Upvotes: 0
Views: 33
Reputation: 2918
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>
</>
);
Upvotes: 1