If you're using JSX, you can also pass a nested object as a prop by building the object like this:

    <HelloWorldClass user={{name:'Kyle'}} />

### Syntax Example in Stack Snipets





    // function component syntax
    function HelloWorldFunc(props) {
      return (
        <div>Hello, {props.user.name} </div>
      );
    }
    // class component syntax
    class HelloWorldClass extends React.Component {
      render() {
        return (
          <div >
            Hello, {this.props.user.name}
          </div>
        );
      }
    }

    // createElement syntax
    const helloCreate = React.createElement(HelloWorldFunc, {user:{name:'Kyle'}});
    // JSX syntax
    const helloJSX = <HelloWorldClass user={{name:'Kyle'}} />

    ReactDOM.render(
      <div>
        {helloCreate}
        {helloJSX}
      </div>
    ,document.querySelector("#root"));




    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

    <div id="root"></div>

I have code of the form

    props = { user: {userattr1: 1, userattr2: 2}};
    var element = React.createElement(MyReactClass, props);
i.e., where props is a *nested object*. When I try to compile the above code I get the error: 

Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.

I've been looking online and it seems that nested objects are perfectly permissible as props. How can I resolve my error?

Edit: `MyReactClass` looks something like this:

    var MyReactClass = React.createClass({
      render: function () {
        <div>{this.props.user}</div>
      }
    })

React.js: Passing nested props into React.createElement

One option for webpack users is to install [**directory-named-webpack-plugin**][1]

Install, and then add the following to Webpack's config file:

```js
var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");

resolve: {
    plugins: [
        new DirectoryNamedWebpackPlugin()
    ]
}
```

When using `require("component/foo")` *and* the path `"component/foo"` is resolved to a directory, Webpack will try to look for `component/foo/foo.js` as the entry point.

**Caution**: While this approach does allow webpack to resolve filenames when building and bundling, your intellisense / tooling options are a different beast altogether.  Unless they also have similar functionality, you may lose *Go To Definition* and *Intellisense* support by not providing the full reference statically.


[1]: https://www.npmjs.com/package/directory-named-webpack-plugin

In my React and Webpack project, I have the following project structure of React components:

    Component/
    ├── Component.jsx
    ├── index.jsx
    └── styles.css
The `index.jsx` file simply imports and exports `Component.jsx`; the reason being that in files that require it, it allows the usage of the following:

    import Component from '../Component'
    
as opposed to

    import Component from '../Component/Component'

However this seems like it may be an unnecessary extra step which requires all new components to follow suit.

With this in mind, my question is: Can I have the best of both worlds? I want to be able to only have `Component.jsx` and `styles.css` in my directory, but not have to use the name twice in my `import` declaration.

Importing JavaScript files with the same name as directory they're inside

You can also get intellisense support from [PropTypes][1].  You'll need to install [prop-types][2]


```js
import React from "react"
import PropTypes from 'prop-types';

function Header(props) {
  return <h1>{props.headerText}</h1>
}

Header.propTypes = {
    headerText: PropTypes.string.isRequired
}

export default Header
```

[![example of intellisense][3]][3]


  [1]: https://reactjs.org/docs/typechecking-with-proptypes.html
  [2]: https://www.npmjs.com/package/prop-types
  [3]: https://i.stack.imgur.com/qDL3l.png

How to make VS Code autocomplete React component's prop types while using the component in JSX markup? 

P.S.: I'm using JS, not TS. 

How to make vs code autocomplete React component's prop types?

For potential re-use, the [official doc samples][1] accomplish this with [`makeStyles`][2] like this:

```js
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
}));
```

Then `useStyles` generates class names like this:

```js
const classes = useStyles();
```

Then add to your `FormControl` component like this:

```jsx
<FormControl className={classes.formControl}>
```

### Demo in Stack Snippets





    const { FormControl, InputLabel, Select, MenuItem, makeStyles } = MaterialUI;

    const App = function () {

      const useStyles = makeStyles((theme) => ({
        formControl: {
          margin: theme.spacing(1),
          minWidth: 120,
        },
      }));

      const classes = useStyles();

      return (
        <div className="App">
          <FormControl className={classes.formControl}>
            <InputLabel id="demo-simple-select-label">Age</InputLabel>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={''}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
          </FormControl>
        </div>
      )
    }

    ReactDOM.render(
       <App />,
       document.getElementById('root')
    );



    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@material-ui/core@4.11.3/umd/material-ui.development.js"></script>

    <div id="root"></div>



[1]: https://github.com/mui-org/material-ui/blob/v4.11.3/docs/src/pages/components/selects/SimpleSelect.js#L9-L29
[2]: https://material-ui.com/styles/advanced/#makestyles

I am trying to set the MUI `Select` component's width. For this I have to provide a class to the `FormControl` component, such as `mw-120` which links to a CSS class defining the `min-width` of 120px.

Material UI Select component:

    <FormControl className='mw-120'>
        <InputLabel htmlFor='selected-language'>Language</InputLabel>
        <Select value={this.state.selectedLanguage}
                onChange={(e) => this.onLanguageChange(e.target.value)}
                inputProps={{
                    name: 'language',
                    id: 'selected-language',
                }}>
            {menuItems}
        </Select>
    </FormControl>

CSS class:

    .mw-120 {
        min-width: 120px;
    }

While I would expect the size of the `Select` component to now have a width of 120px minimum, the component remains exactly the same after rendering, as shown in the following picture. In other words, it is to narrow. The width is not big enough. The width should be greater than the label `Language`.

[![width of Select component too small][1]][1]

An element analysis within the Chrome Developer Tools has shown that the main DIV element of that component has a class `.MuiFormControl-root-234` that contains `min-width: 0;`, and it is located/ranked higher than my `.mw-120` class. I guess this overrides my `.mw-120` class, right? Is there any other way to influence the width of the Material UI Select component? There are no helpful examples of influencing the width of this component on the [Material UI Select component page][2].


  [1]: https://i.stack.imgur.com/aRmEJ.png
  [2]: https://material-ui.com/demos/selects/

Set MUI Select width?

# Update 2018

VS Code now handles this natively via a [`jsconfig.json`][1] and the [JavaScript Language Service][2].

Create the file `jsconfig.json` at your project root and make sure to set `checkJs` to `true`:

Creating a JS Config file, allows Visual Studio to treat the folder as an **Explicit Project**.  Without it, JS files opened in VS Code are treated as independent units, and there is no common project context between any two files.


### Example:



<pre><code>{
  "compilerOptions": {
    "baseUrl": "./src",
    <b>"checkJs": true,</b>
    "jsx": "react"
  }
}
</code></pre>

### Code Action / Quick Fix

Missing modules will show up with a [Code Action][7] (AKA "Quick Fix") with an option to import.  You can click on the lightbulb 💡 or use <kbd>`Ctrl`</kbd> + <kbd>`.`</kbd>

[![code action > import][3]][3]

### Auto Imports / IntelliSense

[Auto Imports][8] will show you available components as you type and import them when selected

[![intellisense > auto import][4]][4]

### Further Reading

* [Visual Studio Code Automatic Imports][5]
* [How to add jsconfig.json to existing vscode project w/o breaking it][6]


  [1]: https://code.visualstudio.com/docs/languages/jsconfig
  [2]: https://github.com/microsoft/TypeScript/wiki/JavaScript-Language-Service-in-Visual-Studio
  [3]: https://i.stack.imgur.com/qQ4FJ.png
  [4]: https://i.stack.imgur.com/oAIeg.png
  [5]: https://stackoverflow.com/a/53015835/1366033
  [6]: https://stackoverflow.com/q/56437517/1366033
  [7]: https://code.visualstudio.com/docs/editor/editingevolved#_code-action
  [8]: https://code.visualstudio.com/Docs/languages/javascript#_auto-imports

I'm using JavaScript (not TypeScript) and using the latest Visual Studio Code.  

I'm not able to get auto import of components working. I've been using the [Auto Import plugin by steoates][1], but it doesn't seem to work. I haven't seen any recent notes about this.

Are there other plugins I've not found that help with auto-import of React Components?

[1]: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

Auto Import of React Components in Visual Studio Code

Another approach outlined in the [**Docs > Themes > Globals**][1] section:

> If you are using the [`CssBaseline`][2] component to apply global resets, it can also be used to apply global styles. 

Here's an example:

```ts
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      "@global": {
        body: {
          backgroundColor: "tomato"
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div className="App">
        <h1>Hello CodeSandbox</h1>
      </div>
    </ThemeProvider>
  );
}
```

### [Demo in CodeSandBox][3] and Stack Snippets





    const { ThemeProvider, createMuiTheme, CssBaseline } = MaterialUI

    const theme = createMuiTheme({
      overrides: {
        MuiCssBaseline: {
          "@global": {
            body: {
              backgroundColor: "tomato",
            },
          },
        },
      },
    })

    const App = () => {
      return (
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <div className="App">
            <h1>Hello CodeSandbox</h1>
          </div>
        </ThemeProvider>
      )
    }

    ReactDOM.render(<App />, document.getElementById("root"))




    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>

    <div id="root"></div>



### Update for MUI 5

Create your theme like this:

```ts
import { createTheme } from "@mui/material";

export const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          backgroundColor: "tomato"
        }
      }
    }
  }
});
```


**Further Reading**: [Global Styles with React and Material UI][4]

[1]: https://material-ui.com/customization/globals/#global-css
[2]: https://material-ui.com/components/css-baseline/
[3]: https://codesandbox.io/s/material-ui-global-styles-xm4p9
[4]: https://stackoverflow.com/q/58755118/1366033

I can't find any way to target root elements with the `ThemeProvider` from MUI.

    const theme = createMuiTheme({
      palette: {
        background: {
          default: "#00000",
          backgroundColor : 'black',
          backgroundImage: 'url(/bg.jpg)',
          backgroundPosition: 'center',
          height:'100%'
        },
        primary: {
          light: '#757ce8',
          main: '#fff',
          dark: '#002884',
          contrastText: 'grey',
        },
      },
    });



How to style body element in MUI

It's perfectly fine to export the store and use within a vanilla js/ts file.


### Example Redux Store

Make sure to `export` the `store` that you create

```ts
import { configureStore } from "@reduxjs/toolkit";
import { slice } from "../features/counterSlice";

export const store = configureStore({
  reducer: {
    counter: slice.reducer
  }
});
```

### Usage in Non-Component Code:

You can then `import` the created `store` in any other code

```ts
import { store } from "../App/store";
import { slice as counterSlice } from "../features/counterSlice";

export function getCount(): number {
  const state = store.getState();
  return state.counter.value;
}

export function incrementCount() {
  store.dispatch(counterSlice.actions.increment());
}
```

### Traditional Usage in Functional Component

```ts
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../App/store";
import { slice as counterSlice } from "../features/counterSlice";

export function Clicker() {
  const dispatch = useDispatch();
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatchIncrement = () => dispatch(counterSlice.actions.increment())
  // ...
```

## Example Slice

```ts
import { createSlice } from "@reduxjs/toolkit";

export const slice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    }
  }
});
```

### [Demo in Codesandbox][4]

**Note**: You cannot use this option with Server Side Rendering.  If you need to support SSR, you can [use middleware][3] to listen to dispatched actions and handle elsewhere.


## Further Reading

* [What is the best way to access redux store outside a react component? | Stack Overflow][1]
* [Access the Redux Store Outside a React Component | Blog][2]
* [How can I access the store in non react components? | Github Issues][3]

[1]: https://stackoverflow.com/q/38460949/1366033
[2]: https://daveceddia.com/access-redux-store-outside-react/
[3]: https://github.com/reduxjs/react-redux/issues/361
[4]: https://codesandbox.io/s/export-redux-store-8djyj

I am beginning with Redux and I always used it in components with connect() and mapStateToProps(), but now I want to call my API with setInterval() every x time to check if the server has new data not stored in the Redux store, and substitute it.

My approach was to create a function that reads the store and update it like that: 

```
import { store } from './dir/dir/store.js'

const refresher = async () => {

    const state = store.getState();

    // Call API, compare 'state.calendar' with calendar from server
    // Call store.dispatch() if they are different, then update Redux store

}

export default refresher
```

My questions are: 
- Is this a good practise to use Redux? 
- Is there a better approach to this problem?

Thanks