I am importing an image to use later like so
import S1 from '../../assets/images/S1.svg';
I am then mapping through an array and want to access this import dynamically. How can I do this successfully?
loop is here:
{characteristics.map(characteristic => (
<div className="characteristic" key={characteristic.key}>
<span className="characteristicKey"><img src={characteristic.key} alt={characteristic.label} /></span>
<span className="characteristicLabel">{characteristic.label}</span>
</div>
))}
You can give a related name to file with characteristics for example c1.svg , c2.svg , c3.svg ...
then in your map :
{characteristics.map((characteristic,i) => (
<div className="characteristic" key={characteristic.key}>
<span className="characteristicKey"><img src={require("c"+i+1+".svg")} alt={characteristic.label} /></span>
<span className="characteristicLabel">{characteristic.label}</span>
</div>
))}
Related
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'
in my console it displays this: "Warning: Each child in a list should have a unique "key" prop."
can you help me ? thank you
Code : https://paste.artemix.org/-/F-vscq
Every node that is returned from the map function needs to have a key prop:
{ users
? users.map((user,topbar, img) => (
<div className="topBarContainer" key={user}>
Your
return (
<Fragment>
{ user
? user.map((users,topbar, img) => ( <div className="topBarContainer">
<div key={topbar} className="topBarLeft">
<span className="logo">Groupomania</span>
</div>
<div className="topBarCenter">
<div className="searchBar">
<Search className="searchIcon" />
<input placeholder="Vous cherchez quelque chose ?" className="searchInput" />
</div>
</div>
<div className="topBarRight">
<div className="topBarLinks">
<span className="topBarLink">Page d'acceuil</span>
<span className="topBarLink">TimeLine ? </span>
</div>
<img key={img} src={users.nom} alt="" className="topBarImg" />
</div>
</div>))
: (<p>coucou</p>)
}
</Fragment>
)
code totally correct.I think your problem should be fetching data and url.Please check axios part and api part of your code.Thanks!
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 stored the image name in localstorage.
My local Storage data is:
Key:contact
data:[{"id":1,"name":"","query":"","image":"'./Koala.jpg'","price":""}]
My code is below
return (
<React.Fragment>
<h2>Products Cataloge.</h2>
<div className="container" id="con">
<div className="row">
{this.state.comment.map((item,index)=>(
<div className="col-md-4" >
<div className="card" id="card1" >
<img className="card-img-top" src={require(item.image)} alt="Card image"/>
<div className="card-body">
<h4 className="card-title">{item.name}</h4>
<Link to={`/description/${item.id}`} ><button className="btn btn-primary">View Discription</button></Link>
</div>
</div>
</div>
))}
</div>
</div>
</React.Fragment>
);
For file and url paths you want them to be formatted './path' or "./path"
By setting data.image to data { image: "'./Koala.jpg'" } you will be returning the whole string value './Koala.jpg' including the single quotes
const data = {imageGood:" ./Koala.jpg " , imageBad:"'./Koala.jpg'"}
console.log('imageBad' , data.imageBad) // "'./Koala.jpg'"
console.log('imageGood', data.imageGood) // "./Koala.jpg"
If you can change the way your data is being populated change:
data:[{"id":1,"name":"","query":"","image":"'./Koala.jpg'","price":""}]
To:
data:[{"id":1,"name":"","query":"","image":"./Koala.jpg","price":""}]
If not then you will need to remove them manually. One easy way:
const item = {image:" './Koala.jpg' "}
console.log( item.image.split("'").join('') )
I am learning React on the fly for a project and am having trouble adding classes to already existing components. I have checked other SO threads and looked through tutorials on the react site - it looks like I am doing it correctly with the className but it is not working. For example, in my Event.js:
render: function() {
return (
<div>
<article>
<div className="row">
{ this.drawOrderError() }
<div className="large-4 columns event-img-div">
<img src={ this.props.image }/>
</div>
<div className="large-8 columns event-right-column">
{ this.state.showCreditCard ? this.drawCreditCard() : this.drawTicketing() }
<br />
<div className="event-detail">
<div className="row">
<div className="large-12 column">
<span className="ticket-column-headings">Event Details</span>
<p className="event-details">{this.props.description}</p>
</div>
</div>
</div>
</div>
</div>
</article>
{ this.drawOrderSummaryOverlay() }
</div>
);
}
I have added the class event-img-div - but when I go to the browser I do not see it added in console, and cannot apply styles to that class. What am I doing wrong? Can provide more code if needed.
I am changing the files in a local directory and running on local host, using gulp to start the server.