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} />
Related
In a react web app I have tried to limit the display of characters using length and substring(0, 10), but getting below error: Could someone please share some advise to fix the issue ?
Error details:
TypeError: Cannot read properties of undefined (reading 'length')
at admin.js:153:1
at Array.map ()
at Admin (admin.js:148:1)
<div className='row'>
<div className='editBlogSection'>
{
blogList.map(({ id, blogdetails, tags, count }) => (
<div className='row'>
<a key={id} href="" className='blogitems'>
<pre><span>{tags}</span> {blogdetails.length > 10 ? blogdetails.substring(0, 10) + '...' : blogdetails}<span>{count}</span></pre>
</a>
<div className='blogitems edit'>
<button>Edit</button>
</div>
<div className='blogitems delete'>
<button onClick={() => handleBlogDelete(id)}>Delete</button>
</div>
</div>
))}
</div>
</div>
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 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 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 have the following jsx code, I am trying to put some code out of the mapping function, but getting errors with the jsx syntax, I want this block displayed only if there is some data..
{this.props.someData ?
<div className="container">
<h3>Heading</h3>
<div className="block1">
<button>one</button>
<buttontwo</button>
</div>
this.props.someData.map((response, index) => {
return (
<div className="Block2">
<div key={index}>
<span>{response.number}</span>
</div>
</div>
</div>
);
}) : ''}
Write it like this:
{this.props.someData ?
<div className="container">
<h3>Heading</h3>
<div className="block1">
<button>one</button>
<buttontwo</button>
</div>
{this.props.someData.map((response, index) => {
return (
<div className="Block2">
<div key={index}>
<span>{response.number}</span>
</div>
</div>
)})
}
</div>
: <div/>}
Mistake you are doing:
To render any js code inside html elements, {} is required, since you are rendering JSX if the condition is true and inside that using map so put map function inside {}, it will work.
You should be able to add a child { wrapping your map. You have a few other errors as well. You were cosing your tags and braces too early. Additionally, an "empty" JSX element should return null, not empty string. You also have broken syntax with no closing > here: <buttontwo</button>
Using a code editor that provides syntax highlighting, and using consistent spacing, and always using eslint to check for errors, will help prevent the need to come to StackOverflow and blocking your programming on syntax questions.
{this.props.someData ?
<div className="container">
<h3>Heading</h3>
<div className="block1">
<button>one</button>
<button>two</button>
</div>
{ this.props.someData.map((response, index) => {
return (
<div className="Block2">
<div key={index}>
<span>{response.number}</span>
</div>
</div>
);
}) }
</div> : null}
If I get your meaning correctly, I think this would do:
{this.props.someData &&
(<div className="container">
<h3>Heading</h3>
<div className="block1">
<button>one</button>
<buttontwo</button>
</div>
{this.props.someData.map((response, index) => {
return (
<div className="Block2">
<div key={index}>
<span>{response.number}</span>
</div>
</div>
);
})}
</div>)
}
I'd recommend you to have a look at the conditional rendering section of the documentation.