Used store for list of user component

[Damates]

Hi All,

I have a question. I worked on a project in react with mobx v.4 and at this moment I started loved mobx and using it everywhere. Now I am working on my project where I want include a mobx v.6 but I found one problem.

In mobx v.4. was possible in the store had an array of components.

For example :
STORE:

export default class UsersStore {

    allUsers = [];

    constructor(rootStore) {
        this.root = rootStore;
    }

   @action
   setUsersList(userComponentArray) {
        this.allUsers = userComponentArray;
   }

   getUsersList() {
        return this.allUsers;
   }
}

userComponentArray looks like this:

const arrayList = [
  <UserName user="user1" />,
  <UserName user="user2" />,
  <UserName user="user3" />
]

In mobx v.4 wasn't any problem when I try to call and render somewhere in the project like {usersStore.getsetUsersList()}
but now when I am using mobx v.6 and used the same construction I got an error :

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I cannot find a reason why the same construction cannot be work.

Or maybe I caught mobx wrong and this idea of the array issn't supported. If am wrong, I would like to ask if is possible to make array of users names(it is simple html with DIVs) and share this array in all components in the project.

I am using webpack and babel for building react app.

Babel config:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": false
      }
    ]
  ]
}

webpack confing:

module.exports = {
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx", ".css"]
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /lib\/@fullcalendar/,
                use: [
                    {
                        loader: "babel-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader"
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: "file-loader"
                    }
                ]
            },
            {
                test: /\.(css|s[ac]ss)$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlPlugin({
            filename: "index.html",
            template: "./public/index.html"
        }),
        new MiniCssExtractPlugin(),
        new Dotenv({
            path: './.env.production', // Path to .env file (this is the default)
        }),
     
    ],
    optimization: {
        minimizer: [
            new CssMinimizerPlugin({
                minimizerOptions: {
                    preset: [
                        'default',
                        {
                            discardComments: { removeAll: true },
                        },
                    ],
                },
            }),
        ],
    },
    devServer: {
        historyApiFallback: true,
        publicPath: '/',
        host: process.env.HOST,
        port: process.env.PORT
    }
}

CodeSandbox example with error: https://codesandbox.io/s/damates-react-mobx6-mjexk?file=/src/App.js

Thank you all for any comment about this problem because in my project I stuck in one place.

[danielkcz]

Please supply a runnable example with MobX 6.

[Damates]

Thank you for your advice. Do you have an example of which you prefer or recommended for mobx 6?

[danielkcz]

No, you need to provide an example of what's not working for you :) Ideally with CodeSandbox or a similar tool so we can investigate the problem.

[Damates]

Oh.. My translation mistake sorry.. ok I will prepare it..

[Damates]

Here is a minimum example where you can see the error https://codesandbox.io/s/damates-react-mobx6-mjexk?file=/src/App.js

[danielkcz]

That's not the fault of MobX, you are trying to render toJS result which is an object, and React doesn't know what to do with it. Either convert it to string with JSON.stringify or .map over it to render the component.

[Damates]

Thank you so much for clarify a problem. So I tryed to remove toJS and use map for render component. But still doesn't work. Now I have a problem with call userStore. Do you have any advice for this problem? Thank you so much for your help. https://codesandbox.io/s/damates-react-mobx6-mjexk?file=/src/components/list/index.jsx

[danielkcz]

Don't render components in your stores, that's just wrong.

https://codesandbox.io/s/damates-react-mobx6-forked-045f7

This is the last piece of help I am going to give you. Your questions are not MobX related. If you need help learning React, there are much better places (eg. StackOverflow).

[Damates]

Thank you so much for your help ;)