Mixin text html into a conditional react statement

Question

I'm Very new to react and I have a conditional statement in react in a table cell and when user are in the the Search nav it shows the birthdate that's coming up fine however getting errors when I simply like to mix in text element the word "birthday" beside the date.

the string below:

cell: (row) => (
                <>
                    <div class="dob">{`${row.firstName} ${row.lastName} ${
                        history.location.pathname.toLowerCase().includes('search') && row.maidenName ? `(${row.maidenName})` : ''
                    }
                    
                  `}</div>
                    <div>{`${history.location.pathname.toLowerCase().includes('search') && row.birthdate ? formatDate(new Date(row.birthdate)) : ''}
                  `}</div>
                </>
            ),

Daniel Karlsson · Accepted Answer · 2022-11-16 00:34:51Z

1

I don't know if this is what you wanted to do, but here's how I would display the word "Birthday" besides the date:

cell: (row) => {
let maidenName = (history.location.pathname.toLowerCase().includes('search') && row.maidenName) ? row.maidenName : '';
let birthdate = (history.location.pathname.toLowerCase().includes('search') && row.birthdate) ? formatDate(new Date(row.birthdate)) : '';

return <>
        <div class="dob">{`${row.firstName} ${row.lastName} ${maidenName}`}</div>
        <div>{`Birthday: ${birthdate}`}</div>
</>

}

answered Nov 16, 2022 at 0:34

Daniel Karlsson

1824 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zurch Over a year ago

It worked thanks however just some formatting I have to work out as I didnd fully demonstrate what I was trying to accomplish however the method you helped me look at the problem as I should; .formatting the date first then passing it to the div so that could place text into it. . My app the birthdate and date should only show on the search page grid as the the other pages share the same grid. and the word birthday is showing up on the other pages as the date is only showing as it should on search page grid..

Zurch Over a year ago

This line is complaining changed it though to: let birthdate = (formatDate(new Date(row.birthdate)); ....missing a coma ?? as I think I need to have the history line etc in the div birthday as line as you had outlined as Im getting the word birthday great however on the other pages too. only like to have it in the shared search grid cell

Collectives™ on Stack Overflow

Mixin text html into a conditional react statement

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related