Can't get the array state value in React

Question

When I try to get value ...this.state.users shows error in react

React Code

handleChange(i, e) {
        const { name, value } = e.target;
        let users = [...this.state.users];
        users[i] = { ...users[i], [name]: value };
        this.setState({ users });
    }

My webpack file

const path = require('path');
module.exports = (env) => {
    const isProduction = env === 'production';
    return {
        entry: './src/index.js',
        output: {
            path: path.join(__dirname, 'public'),
            filename: 'bundle.js',
        },
        module: {
            rules: [
                {
                    loader: 'babel-loader',
                    test: /\.js$/,
                    exclude: /node_modules/,
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader'],
                },
            ],
        },
    };
}

And the error is

 ERROR in ./src/components/Index.js
[1] Module build failed: SyntaxError: E:/Program/reactjs/check/client/src/components/Index.js: Unexpected token (47:15)

Please help me to fix this error

You sure `this.state.users` is spreadable? Maybe check if its an object or array before spreading. — Miroslav Glamuzina, Feb 27 '19 at 00:19

score 1 · Accepted Answer · answered Feb 27 '19 at 00:47

It looks like you need to configure babel correctly. According to this post, you need to make sure that you have the stage-0 preset installed:

npm install --save-dev babel-preset-stage-0

and configured:

{
  "presets":[
    "es2015", "react", "stage-0"
  ]
}

However, if you are using Babel v7 or higher you have to use a different installation & configuration:

npm install --save-dev @babel/plugin-proposal-object-rest-spread

and put it into your .babelrc file:

{
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

Can't get the array state value in React

1 Answers1