Hello so i'm working on a project where i have thru data and displayed i'm having a problem cause the data isn't consistante like for example not all product have sale i want to display the old price and the new one on the product detail page the product having a sale works fine however the ones that doesn't i keep getting " Cannot read properties of undefined (reading 'old_price')" this is the code i'm currently using:
<div >
{filters.filter((product) => product.id === id).map((product) => (
<div className='product-bigger-wrapper'>
<div class="product-list-wrapper">
<div className="product-detail-container">
<div>
<div className="image-container">
<img src={product.image} className="product-detail-image" alt=""/>
</div>
</div>
<div className="product-detail-desc">
<div className="product-detail-header-title">
<h1 className='product-name'>{product.name}</h1>
</div>
<p className='product-unit-title'> {product.measurement}</p>
<div className="product-unit-price-container">
<p className='product-unit-price'> ${product.price}</p>
{ product.sale.old_price !== undefined ?
<p className='product-unit-wasprice'> ${product.sale.old_price}</p>
: null}
</div>
<h4 className='product-description-p'>Product Details: </h4>
<div className='description'>
<p className='product-description'>{product.description}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
and this is an example of product that has the sale part and product that doesn't
The problem is the line where you check for old_price being undefined.
{ product.sale.old_price !== undefined ? <p>...</p> : null }
^
this is undefined in your second product object
You can fix it by checking for the sale object first
{ product.sale && product.sale.old_price !== undefined ? <p>...</p> : null }
or preferably use optional chaining
{ product.sale?.old_price !== undefined ? <p>...</p> : null }
you should first check if stale object exists or not , with help of Optional chaining (?.) in javascript
{ product?.sale?.old_price &&
<p className='product-unit-wasprice'> `${product.sale.old_price}`</p>
}
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 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 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.