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>
you can add all classes like this:
className='dataArea blogImageSection dataArea dataDate tags readmoreLink dataArea views'
Related
I am trying to utilize React Responsive Carousel. Currently, with my implementation, this code returns all objects in the array on the 1st page of the carousel (rending the point of a carousel useless). I'd like to have it so that each page of the carousel only shows one object in the array and you would need to utilize the "next" or "arrow" button via the carousel to view the next object in the array.
I tried to change profiles.map to profiles.forEach though this doesn't return any object at all.
I'm currently in a coding bootcamp, so forgive me if the code is bad altogether.
const { loading, data } = useQuery(QUERY_PROFILES);
const profiles = data?.profiles || [];
return (
<Carousel>
<div className="flex-row justify-space-between my-4">
{profiles &&
profiles.map((profile) => (
<div className="card col-12 col-xl-6" key={profile._id}>
<div className="card-body">
<h3 className="card-title">
{profile.firstName} {profile.lastName} <br />
<span className="mechLoc">
Location: {profile.location}
</span>
</h3>
<Link
className="seeProfileBtn btn btn-primary"
to={`/profiles/${profile._id}`}
>
See mechanic profile
</Link>
</div>
</div>
))}
</div>
</Carousel>
);
}
I want to create a list of "tags" that I could use for different pages of my website using react, but the problem I am having is that I need these lists of different tags to be different and editable on each page using it's id, but I'm new to react so I am unsure about how to approach this.
What I have right now is
<div className="input-tag">
TAGS
<ul className="input-tag__tags">
<li>
Tag
<span> </span>
<button type="button"> Remove </button>
</li>
<li className="input-tag__tags__input">
<input type="text" />
</li>
</ul>
</div>
Just a basic unordered list
I do have the course.id that tells me the id of the different pages, I know I should be using but I'm unsure on how to go about it, any help is appreciated thank you!
I am trying to refactor from class based to functional. While doing so I will need to use hooks instead of setting this.state etc.. I am trying to get a FORM to open when i click a button. The button will also change from "add reply" to "submit comment" once the form opens. I am stumped. This is the best thing I could come up with... Doesnt work. in fact, it makes my "add reply" button completely disappear. Any thoughts on this? Here is the code that I have written. inside of the comment I am trying to return a component using ternary....
image of component as-is
import React, {useState} from 'react';
import FormOpen from './FormOpen';
const CommentCreated = (props) => {
const [resource, setResource] = useState([{visible: false, addReply: 'Add Reply'}]);
return (
<div className="ui threaded comments">
<h3 className="ui dividing header">Comments</h3>
<div className="comment">
<a href="/" className="avatar">
<img alt="avatar" src= {props.avatar} />
</a>
<div className="content">
<a href="/" className="author">{props.author}
</a>
<div className="metadata">
<span className="date">Today at 5:42PM</span>
</div>
<div className="text">{props.content}
</div>
<div className="actions">
{resource.visible ? <FormOpen /> : null}
<a className="reply" onClick={() => {setResource([{visible: true, addReply: 'Submit Comment'}]);}}>{resource.addReply}
</a>
<a className="save">Save</a>
<a className="hide">Hide</a>
</div>
</div>
</div>
</div>
);
};
export default CommentCreated;
You should replace the setResource(['Submit Comment', true]) with :
setResource([{
visible: true,
addReply: 'Submit Comment'
}])
To match the shape of your state.
EDIT:
Here is a working example based on your code.
As I can see from your example, your resource state doesn't need to be an array but simply an object.
Furthermore, as you are using hyperlinks <a />, you must use preventDefault() on your event being triggered if you don't want the page to refresh.
I am customizing groupRow of mbrn/material-table, But I don't find any documents for doing it.
https://material-table.com/#/docs/features/grouping
So far I managed to make the groupRow and its working fine. But now I don't know how to render the table row on expanding the groupRow.
I tried using MTableBody but the records are not showing up
<tr className="MuiTableRow-root">
<td
className="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-paddingNone MuiTableCell-body py-2"
colSpan={visiblecolumns + isGroupedAndHidden}
>
<button className="d-flex Card w-100">
<div className="ml-3 text-left">
<div className="text--bold text--muted text--xs">
{props.groups[0].title}
</div>
<div className="pt-1 pb-1">
{groupheader.title == 'Priority' ? (
<Priority value={groupData.value} />
) : groupheader.title == 'Time' ? (
<DateFormatter value={groupData.value} relative={true} />
) : (
groupData.value
)}
</div>
</div>
<div className="ListGroupHeader__meta d-flex align-items-center justify-content-end">
<span className="ListGroupHeader__count ml-3 mr-1">
{alerts.length}
</span>{' '}
alert{alerts.length > 1 ? 's' : ''}
<ChevronRight
className="text-muted"
style={{ fontSize: '30px' }}
/>
</div>
</button>
<MTableBody {...props} />
</td>
</tr>
This is how my code looks like. Am so confused I don't know what am missing to make it work
CodeSandBox: https://codesandbox.io/s/festive-bell-5d76e
Provided by your reference, the documentation say
You can override grouped row component with overriding components.GroupRow
That's exactly what you did, you overrated the entire component, but that component had a lot of functionality that you've missed like the Expanding and showing the content of the group.
This is the original component - https://github.com/mbrn/material-table/blob/master/src/components/m-table-group-row.js
So what you had do is copy and change or create your own component with the same functionality.
In the next example, I took the original component and changed it according to your structure (this is far from perfect, just showing you the way).
I copied MTableGroupRow and MTableCell (because Cell component is part of TableRow and had to change) and called them CustomGroupRow and CustomCell.
https://codesandbox.io/s/frosty-forest-su2dl
I need to use data-src attribute in < div > to show an image but in react this attribute for me is not working, is there any way to fix that?
<div
data-aos="fade-up"
data-aos-easing="ease-in-out"
data-aos-duration="600"
data-aos-once="true"
>
<a href="#">
<div data-src="../../contents/images/01.jpg">
<div>
//some text here
</div>
</div>
</a>
</div>
When I tested it in simple html it is working and no problem and image shows correctly, but in react it is not Ok...