I have a json like this one:
{
"index": 1,
"ln": "27953",
"name": "Product 1",
"availability": {
"day0726": "G",
"day0727": "G",
"day0728": "G",
}
}
And I'd like to display the availability dynamically based on what date is it. "day0726" is July 26 for example. How could I display the value of the correct day using the following code piece:
import React from "react"
import Product from "./Product"
const Productlist = ({ prodlist }) => {
return (
<div>
{
prodlist.map((item, i) => {
return (
<Product
key={prodlist[i].index}
name={prodlist[i].name}
ln={prodlist[i].ln}
availability={*this is I want to change dynamically*}
/>
)
})
}
</div>
)
}
export default Productlist
Can it be done or is train of thought completely wrong?
Thank you in advance!
EDIT: I can change the date key format to anything if that's necessary.
You first have to create a Date of the format you have and then you can use that in the component to get the products availability
at a certain key:
let date = new Date(); function str_pad(n) { return String("00" + n).slice(-2); } date = "day"+(str_pad(date.getMonth()+1))+str_pad(date.getDate()); console.log(date)
import React from "react"
import Product from "./Product"
let date = new Date();
function str_pad(n) {
return String("00" + n).slice(-2);
}
date = "day"+(str_pad(date.getMonth()+1))+str_pad(date.getDate());
const Productlist = ({ prodlist }) => {
return (
<div>
{
prodlist.map((item, i) => {
return (
<Product
key={prodlist[i].index}
name={prodlist[i].name}
ln={prodlist[i].ln}
availability={prodlist[i].availability[date]}
/>
)
})
}
</div>
)
}
export default Productlist
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.