I was searching an entire day to add some categories from a JSON file using React hooks, with no luck so far. I am hoping that anyone can help me with this. Here is how the JSON it looks:
{
"shoes": {
"items": [
{
"id": 1,
"name": "Sneakerși piele Massimo Dutti",
"price": 135,
"currency": "LEI",
"image": "https://i.imgur.com/Rz8lVQa.jpg",
"size": 45,
"colour": "Negru",
"material": "Piele",
"brand": "Massimo Dutti",
"description": "Sneakerși din piele cu talpă inițial albă, din colecția de toamnă-iarnă 2019, Massimo Dutti."
},
{
"id": 2,
"name": "Teniși negri Polo Ralph Lauren",
"price": 100,
"currency": "LEI",
"image": "https://i.imgur.com/Og3Oh24.jpg",
"size": 45,
"colour": "Negru",
"material": "Pânză",
"brand": "Polo Ralph Lauren",
"description": "Teniși din pânză cu talpă inițial albă, din colecția de primăvară-vară 2019, Fashion Days."
},
{
"id": 3,
"name": "Ghete din piele maro Massimo",
"price": 185,
"currency": "LEI",
"image": "https://i.imgur.com/zoqSu87.jpg",
"size": 45,
"colour": "Maro",
"material": "Piele",
"brand": "Massimo Dutti",
"description": "Ghete maro din piele, din colecția de toamnă-iarnă 2017, Massimo Dutti."
}
],
"image": "https://i.imgur.com/X0qldXO.jpg",
"name": "Încălțăminte",
"description": "Ghete, pantofi, sneakerși: finețe garantată!"
},
"sweaters": {
"items": [
{
"id": 4,
"name": "Pulovăr finuț cu guler",
"price": 95,
"currency": "LEI",
"image": "https://i.imgur.com/6afzuEr.jpg",
"size": "L",
"colour": "Maro",
"material": "Cașmir",
"brand": "DS Damat",
"description": "Pulovăr din cașmir, slim fit, colecția toamnă-iarnă 2019, DS Damat."
},
{
"id": 5,
"name": "Pulovăr multicolor",
"price": 105,
"currency": "LEI",
"image": "https://i.imgur.com/s0VytKc.jpg",
"size": "L",
"colour": "Multicolor",
"material": "Bumbac",
"brand": "McNeal",
"description": "Pulovăr multicolor, colecția toamnă-iarnă 209, McNeal."
},
{
"id": 6,
"name": "Pulovăr călduros și frumos",
"price": 165,
"currency": "LEI",
"image": "https://i.imgur.com/BWGgzlK.jpg",
"size": "L",
"colour": "Multicolor",
"material": "Lână",
"brand": "SELECTED",
"description": "Pulovăr din lână, în carouri, colecția toamnă-iarnă 2019, SELECTED."
},
{
"id": 7,
"name": "Pulovăr din lână",
"price": 160,
"currency": "LEI",
"image": "https://i.imgur.com/dTcMbHT.jpg",
"size": "L",
"colour": "Crem",
"material": "Lână",
"brand": "Massimo Dutti",
"description": "Pulovăr din lână cu model, colecția toamnă-iarnă 2019, Massimo Dutti."
}
],
"image": "https://i.imgur.com/SZU7liE.jpg",
"name": "Pulovere",
"description": "Pulovărașe elegănțele, slim, clasă superioară."
},
"pants": {
"items": [
{
"id": 8,
"name": "Blugi bleumarin slim fit",
"price": 35,
"currency": "LEI",
"image": "https://i.imgur.com/VhpATO8.jpg",
"size": "34",
"colour": "Bleumarin închis",
"material": "Blug",
"brand": "DS Damat",
"description": "Blugi bleumarin, slim fit, colecția primăvară-vară 2019, DS Damat."
},
{
"id": 9,
"name": "Blugi negri slim fit",
"price": 40,
"currency": "LEI",
"image": "https://i.imgur.com/weiI07t.jpg",
"size": "34",
"colour": "Negru-gri",
"material": "Blug",
"brand": "DS Damat",
"description": "Blugi negri, slim fit, colecția toamnă-iarnă 2019, DS Damat."
}
],
"image": "https://i.imgur.com/srQCDRN.jpg",
"name": "Pantaloni/blugi",
"description": "Jeanși și pantaloni pentru baieții care și-o ard patroni!"
},
"jackets": {
"items": [
{
"id": 10,
"name": "Haină lungă din lână virgină",
"price": 210,
"currency": "LEI",
"image": "https://i.imgur.com/IXrZitQ.jpg",
"size": "L",
"colour": "Gri închis",
"material": "Lână virgină",
"brand": "Peek and Cloppenburg",
"description": "Haină lungă din lână virgină, colecția toamnă-iarnă 2018, Peek and Cloppenburg."
},
{
"id": 11,
"name": "Geacă bleumarin cu glugă detașabilă",
"price": 250,
"currency": "LEI",
"image": "https://i.imgur.com/eCZd7PU.jpg",
"size": "L",
"colour": "Bleumarin",
"material": "Poliester",
"brand": "DS Damat",
"description": "Geacă bleumarin cu glugă detașabilă, colecția toamnă-iarnă 2019, DS Damat."
}
],
"image": "https://i.imgur.com/81I6Oab.jpg",
"name": "Geci/Haine",
"description": "Confortabile, călduroase și nu arăți ca un cartof!"
},
"tshirts": {
"items": [
{
"id": 12,
"name": "Tricou în dungi",
"price": 90,
"currency": "LEI",
"image": "https://i.imgur.com/BWvzCwB.jpg",
"size": "L",
"colour": "Multicolor",
"material": "Bumbac",
"brand": "Lacoste",
"description": "Tricou în dungi, colecția primăvară-vară 2019, Lacoste."
},
{
"id": 13,
"name": "Tricou de ping pong",
"price": 110,
"currency": "LEI",
"image": "https://i.imgur.com/4BbF4TO.jpg",
"size": "L",
"colour": "Roșu",
"material": "Poliester",
"brand": "Li Ning",
"description": "Tricou de ping pong cu imprimeu cu dragon, purtat de jucatorii naționalei chinei în 2013."
},
{
"id": 14,
"name": "Tricou original BVB cu autograf",
"price": 1909,
"currency": "LEI",
"image": "https://i.imgur.com/etIsbHV.jpg",
"size": "L",
"colour": "Galben-Negru",
"material": "Poliester",
"brand": "Puma",
"description": "Tricoul purtat de Borussia Dortmund în sezonul competițional 2018-2019, cu numarul 7 și numele 'SANCHO'. Tricoul este semnat de portarul Borussiei, Roman Burki."
}
],
"image": "https://i.imgur.com/l27WtFL.jpg",
"name": "Tricouri",
"description": "Și de băiețeală și de sport."
},
"accesories": {
"items": [
{
"id": 15,
"name": "Fular TJ cu două fețe",
"price": 85,
"currency": "LEI",
"image": "https://i.imgur.com/rSVUiLO.jpg",
"size": "Universal",
"colour": "Gri-Bleumarin",
"material": "Cașmir",
"brand": "Trussardi Jeans",
"description": "Fular cu imprimeu, din colecția toamnă-iarnă 2018, Trussardi Jeans."
},
{
"id": 16,
"name": "Mănuși din piele",
"price": 60,
"currency": "LEI",
"image": "https://i.imgur.com/LbjGaZ1.jpg",
"size": "L",
"colour": "Negru",
"material": "Piele",
"brand": "DS Damat",
"description": "Mănuși din piele, cu model, din colecția toamnă-iarnă 2018, DS Damat."
}
],
"image": "https://i.imgur.com/qw3wDj8.jpg",
"name": "Accesorii",
"description": "Fulare, căciuli, mănuși: nu mai sta pe gânduri, cumpără-le acuși!"
}
I managed to map the objects with states, but I want to do it by using hooks. Can anyone help me refactor the code to work the same way but using hooks?
import products from '../utils/products.json';
import HomeCategory from '../components/HomeCategory';
class Home extends React.Component{
constructor() {
super();
this.state = {
categories: []
}
}
componentDidMount() {
const categories = Object.keys(products);
this.setState({categories});
}
render() {
return(
<div className="container-fluid container-min-max-width">
<div className="row">
{this.state.categories.map((category, index) =>
<HomeCategory
key={index}
route={category}
name={products[category].name}
description={products[category].description}
image={products[category].image}
/>
)}
</div>
</div>
);
}
}
CodePudding user response：
It looks like you don't need a state. You could move categories out your component (because json is not going to change and doesn't depend on anything) and just use this variable to iterate by.
import products from '../utils/products.json'
import HomeCategory from '../components/HomeCategory'
const categories = Object.keys(products)
const Home = () => {
return (
<div className="container-fluid container-min-max-width">
<div className="row">
{categories.map((category, index) => (
<HomeCategory
key={index}
route={category}
name={products[category].name}
description={products[category].description}
image={products[category].image}
/>
))}
</div>
</div>
)
}