0

I my react app, I am using react markdown for rendering the blog content. How can we add multiple classes to the ReactMarkdown. At the moment I have used dataArea class alone, but i would need to use below classes for styling purpose. Could someone please advise ?

.blogImageSection
.dataArea 
.dataDate 
.tags 
.readmoreLink 
.dataArea p 
. views

csb link for reference : https://codesandbox.io/s/great-bardeen-9lsog5?file=/src/App.js

// react markdown usage:

 { popularResults.map (({id, blogdetails, tags, createdAt }) => (

        <ReactMarkdown className='dataArea' remarkPlugins={[remarkGfm]}>{blogdetails} 
        </ReactMarkdown>
          
        ))}

This is the normal blog where I have used the above classes without using react markdown

<a key={id} href="my url">
          <div key={id} className='blogImageSection'>
            <img alt="id" src={photo} />
            <div key={id} className='dataArea'>
              <span key={id} className='dataDate'>{date}</span>
              <span className='tags'>cypress</span>
              <h3>{heading}</h3>
              <p>
                Best heading added here.
                The most relevant data added here.
                Greatest of all time. Print the whole text here.
                Ideas are always usefull....
              </p>
              <a href="_blank" className="readmoreLink">
                Read more →
              </a>
              <span className='views'>
                {topViews > 999 ? (topViews / 1000).toFixed(2) + "K" : topViews}
              </span>
            </div>
          </div>
        </a>
soccerway
  • 10,371
  • 19
  • 67
  • 132

1 Answers1

0

you can add all classes like this:

 className='dataArea blogImageSection dataArea dataDate tags readmoreLink dataArea views'
Kamran Davar
  • 427
  • 2
  • 12