Search code examples
jsonreactjswebpackwebpack-2

Loading JSON file into React Component state | Wepback2

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: enter image description here

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!

Solution

  • (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: ""
 };