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('') )
Related
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 pulling project info from database and then based on how many projects I have, I push to an array and render. The problem is for some reason the "dropdownOptions" will not toggle between showing and hiding.
I basically just want to be able to click the dropdown arrow and have it show options like "delete" or "settings". Also not sure if I need to have a separate id for each project component created.
Code Snippets:
// Using hook to set display of dropdown to false
const [dropdownOptions, setDropdownOptions] = useState(false);
// This piece automatically renders clickable projects from database
const pList = [];
for (var i = 0; i < project_list.length; i += 1) {
var projectName = project_list[i]
pList.push (
<div className="projects" key={i}>
<div className="projectName">Name: <div className="projectText">{projectName}</div></div>
<div className="projectDate"> Date Created: <div className="projectText">{date}</div></div>
<div className="projectLabels">LabelsLeft:</div>
<div className="drop">
<div className="dropArrow" onClick{setDropdownOptions(!dropdownOptions)}>
{dropdownOptions ? <ProjectDropdown/> : null}
</div>
</div>
</div>
);
};
setpList(pList);
})
// Then I simply render the component "pList"
return (
<div className="container">
<div className="projectsContainer">
<div className="projectsTitle">
Projects:
<div className="addProject" onClick={toggleShow}></div>
</div>
{pList}
<div className="message">
{message}
</div>
</div>
</div>
)
Ideal look would be this before user presses droparrow on project
And this afterwards, but only for the project clicked
You have to options to such problems:
1- make a state for each item in the list, and for each one you have a boolean that can tell if that item has its dropdown opened or not
2- make single state item, but make it a number that represents the clicked on item id, when that id matches the state you open the dropdown for that item
const [selectedItem, setSelectedItem] = useState(-1);
and in your jsx
<div className="projects" key={i}>
<div className="projectName">Name: <div className="projectText">{projectName}</div></div>
<div className="projectDate"> Date Created: <div className="projectText">{date}</div></div>
<div className="projectLabels">LabelsLeft:</div>
<div className="drop">
<div className="dropArrow" onClick{()=>setSelectedItem(i)}>
{selectedItem == i ? <ProjectDropdown /> : null}
</div>
</div>
</div>
And as an advice, it's preferable to add a real id taken from your API, because the key passed to each item is so important for react, not only for showing the dropdown.
Suggested solution code
function TestSolution() {
// Using hook to set display of dropdown to false
const [selectedItem, setSelectedItem] = useState(-1);
// This piece automatically renders clickable projects from database
const pList = project_list.map((projectName, i) => (
<div className="projects" key={i}>
<div className="projectName">Name: <div className="projectText">{projectName}</div></div>
<div className="projectDate"> Date Created: <div className="projectText">{date}</div></div>
<div className="projectLabels">LabelsLeft:</div>
<div className="drop">
<div className="dropArrow" onClick{() => setSelectedItem(i)}>
{selectedItem == i ? <ProjectDropdown /> : null}
</div>
</div>
</div>
))
// Then I simply render the component "pList"
return (
<div className="container">
<div className="projectsContainer">
<div className="projectsTitle">
Projects:
<div className="addProject" onClick={toggleShow}></div>
</div>
{pList}
<div className="message">
{message}
</div>
</div>
</div>
)
}
Thinking in react is different, don't use a new state for some data if you can derive it from another state or data, that will make your life easier.
I am trying to assign image src which i get from api :
{articles.items.map((item, key) => (
<div class="col-lg-4">
<div class="blog-card">
<img src="{item.thumbnail}"/> // here
<h2>{item.title}</h2>
<p dangerouslySetInnerHTML={{__html: ' ' + item.description.slice(0,450) + '...'}}></p>
<div>
{item.categories.map((tag, key) => (
<span className="tag">{tag}</span>
))}
But instead i am getting this in my html :
<img src="{item.thumbnail}"/> // Not really converted
How to load my dynamic image ?
Just remove the parentheses:
<img src={item.thumbnail} />
I have been messing around with a few conditional rendering methods but, I can't seem to find one that works.
<div className="tags">
{adv_event.types.map(type => (
<div className="tag" key={type.tid}>
<h5 className="body-color">Event Type:</h5>
<Link to={`/events/category/${type.slug}`} className="home-link track-click">{type.name}</Link>
</div>
))}
</div>
Right now <h5 className="body-color">Event Type:</h5> is repeated for every tag. Is there a way to show the title once without adding it before each tag?
Move it outside the loop?
<div className="tags">
{adv_event.types.length > 0 ? (<h5 className="body-color">Event Type:</h5>) : ''}
{adv_event.types.map(type => (
<div className="tag" key={type.tid}>
<Link to={`/events/category/${type.slug}`} className="home-link track-click">{type.name}</Link>
</div>
))}
</div>
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.