Add jsx in value of key hooks react

Question

This is my code

const events = [
    {
      event_name: 'Movie Night',
      event_image: 'https://drive.google.com/uc?id=?????????????????',
      event_date: 'Feb 29',
      event_day: 'Friday',
      event_time: '6:30 PM – 9:30 PM',
      event_description:
        'In partnership with our Building, we present Movie Night!'
    }
  ]

but i would like to add styling to the description hence, adding jsx to the value of the key, something like this

event_description: 'In partnership with our <span className="font-bold> "Building </span>, we present Movie Night!'

btw, i'm using tailwind

but my syntax is not accepted, nor the others that i tried, if anyone could help on how this should be done it would be much appreciated!

score 2 · Accepted Answer · answered Apr 08 '20 at 04:11

Write an inline component for the case where you need to add some styles.

For your case you can do the following.

const events = [
    {
        event_name: 'Movie Night',
        event_image: 'https://drive.google.com/uc?id=?????????????????',
        event_date: 'Feb 29',
        event_day: 'Friday',
        event_time: '6:30 PM – 9:30 PM',
        event_description: () => (<>In partnership with our <span className='font-bold'>Building </span>, we present Movie Night!</>)
    }
];

while rendering you can do something like-

return events[0].event_description()

You can also use dangerouslySetInnerHTML. However it is not recommended as per react offical docs.

Insert HTML with React Variable Statements (JSX)

you can also use some libraries for ex: html-react-parser

Add jsx in value of key hooks react

1 Answers1