Loading JSON file into React Component state | Wepback2 - json

Question

I've been trying to import a local JSON file into my react components state for a while now and no matter how much i google and try - i cant seem to get it to work. Here is my json file:
{
"products": [
{"id": 1, "category": "paint", "name": "clowd", "type": "matt emulsion", "stocked": true, "size": "100x130", "thumbnail": "23-sm.png", "previewImg": "23.png"},
{"id": 2, "category": "paint", "name": "dålig sikt", "type": "matt emulsion/olja/akryl", "stocked": true, "size": "100x130", "thumbnail": "24-sm.png", "previewImg": "24.png"},
{"id": 25, "category": "print", "name": "MIMI | 2nd edition", "type": "akvarellppr, 70x100", "limited": "30", "available": "28", "price": "3,000", "stocked": true, "thumbnail": "mimisecond-sm.jpg", "previewImg": "mimisecond.jpg"},
{"id": 26, "category": "print", "name": "max", "type": "uppspänd canvas, 95x120", "limited": "30", "available": "28", "price": "7,000", "stocked": true, "thumbnail": "max-sm.jpg", "previewImg": "max.jpg"},
{"id": 38, "category": "places", "stocked": true, "desc": "Vernisage Strössel # Linnégatan, sthlm 2015", "thumbnail": "17.png", "previewImg": "17.png"},
{"id": 39, "category": "places", "stocked": true, "desc": "Max # Nybergsgatan, sthlm 2016", "thumbnail": "26.png", "previewImg": "26.png"}
]
}
Here is my react component:
import React, { Component } from 'react';
import data from 'data.json';
console.log(data);
// Component import
import Menu from './components/menu';
import Footer from './components/footer';
import ProductContainer from './components/productContainer';
import CategoryContainer from './components/categoryContainer';
class Archive extends React.Component {
constructor(props){
super(props);
this.state = {
products: data,
category: ""
};
this.filterHandler = this.filterHandler.bind(this);
}
// Set component state to the currently clicked "cat" (CategoryItem)
filterHandler(tag){
this.setState({
category: tag
})
}
render() {
// 1. Render CategoryContainer with props products and filterHandler function to show all uniqe CategoryItems and filter products based on category
// 2. Render ProductContainer based on category. If this.state.category.length is true - filter "prod" & where prod.categories is same type and name as this.state.category : else render all this.state.categories that matches "paint".
return (
<div>
<Menu />
<div className="archive-container">
<div className="archive-wrapper">
<CategoryContainer
filterHandler={this.filterHandler}
products={this.state.products}
/>
<br/><br/>
<ProductContainer
products={this.state.category.length
? this.state.products.filter((prod) => prod.category === this.state.category)
: this.state.products.filter((prod) => prod.category === 'paint')
}
/>
</div>
</div>
<Footer />
</div>
);
};
};
export default Archive;
Here is my webpack2 file:
// DEVELOPMENT
const webpack = require('webpack');
const path = require('path');
const entry = [
'webpack-dev-server/client?http://localhost:8080', // bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading only- means to only hot reload for successful updates
'./app.js'
]
const output = {
path: path.join(__dirname, 'dist'),
publicPath: '/dist',
filename: 'bundle.min.js'
}
const plugins = [
new webpack.HotModuleReplacementPlugin(), // enable HMR globally
new webpack.NamedModulesPlugin() // prints more readable module names in the browser console on HMR updates
]
const config = {
context: path.join(__dirname, 'src'),
entry: entry,
output: output,
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
use: {
loader: "babel-loader"
}
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: { limit: 10000, name: './images/[name].[ext]' }
}]
},
{
test: /\.(sass|scss)$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: plugins,
externals: {
jquery: 'jQuery'
}
}
module.exports = config
I get the error:
If I change the json file to a javascript object and input it directly into the constructor:
constructor(props){
super(props);
this.state = {
products: [
{id: 1, category: 'paint', name: 'clowd', type: 'matt emulsion', stocked: true, size: '100x130', thumbnail: '23-sm.png', previewImg: "23.png"},
{id: 2, category: 'paint', name: 'dålig sikt', type: 'matt emulsion/olja/akryl', stocked: true, size: '100x130', thumbnail: '24-sm.png', previewImg: "24.png"},
{id: 3, category: 'paint', name: 'dålig sikt', type: 'matt emulsion/olja/akryl', stocked: true, size: '100x130', thumbnail: '25-sm.png', previewImg: "25.png"},
{id: 4, category: 'paint', name: 'pink', type: 'matt emulsion', stocked: true, size: '100x130', thumbnail: '1-sm.png', previewImg: "1.png"},
{id: 5, category: 'paint', name: 'pink', type: 'matt emulsion', stocked: true, size: '100x130', thumbnail: '27-sm.png', previewImg: "27.png"},
{id: 6, category: 'paint', name: 'pinks', type: 'matt emulsion', stocked: true, size: '100x130', thumbnail: '2-sm.png', previewImg: "2.png"}
],
category: ""
}
this.filterHandler = this.filterHandler.bind(this);
}
Then it works fine. But I want it in a separate json file so it wont be bundled and so it will be easier for client to add items to the list.
Maybe there is a smarter way to do this, I'm new to react and webpack and are hoping to learn .. Greatful for any form of input. Thank you!

Answer 1

(if someone came to fix this... in comments of question are fixes to common mistakes while importing json file in webpack 2)
Your Archive.state looks like:
{
products: { products: [ (your rest of array) ] },
category: ""
}
Your error is
this.state = {
products: data,
category: ""
};
Should be:
this.state = {
products: data.products,
category: ""
};