React-admin: Having an error when using the custom login page shown in the docs

user_7336729 0
Viewed 784

I'm having this error when trying to use the custom login page from the react-admin official docs.

index.js:1 Warning: Failed prop type: The prop `theme` is marked as required in
`ThemeProvider`, but its value is `undefined`.

In MyLoginPage.js, I have this code

import * as React from 'react';
import { useState } from 'react';
import { useLogin, useNotify, Notification } from 'react-admin';
import { ThemeProvider } from '@material-ui/styles';

const MyLoginPage = ({ theme }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const login = useLogin();
  const notify = useNotify();
  const submit = (e) => {
      e.preventDefault();
      login({ email, password })
        .catch(() => notify('Invalid email or password'));
  };

  return (
     <ThemeProvider theme={theme}>
       <form onSubmit={submit}>
         <input 
           name="email" 
           type="email" 
           value={email} 
           onChange={e => setEmail(e.target.value)} 
         /> 
         <input 
           name="password" 
           type="password" 
           value={password} 
           onChange={e => setPassword(e.target.value)} 
         />
       </form>
       <Notification />
     </ThemeProvider>
  );
};

export default MyLoginPage;

Can you help me to see what is wrong?
I'm following the docs to learn the Framework.

This is the link to the React Admin page.

react-admin reactjs javascript
1 Answers

In that particular example, the react-admin team was focused more on explaining the custom login functionality than styling.

You can do two things depending on your learning goal, at the moment:

  • Approach-1
    Remove the <ThemeProvider> entirely, if you're only focus is login functionality. And just replace it with React.Fragment since you need to enclose the two remaining components.
const MyLoginPage = (props) => {
  // other

  return (
     <> // React.Fragment (shorthand)
       <form onSubmit={submit}>
         <input ... /> 
         <input ... />
       </form>
       <Notification />
     </>
  );
  • Approach-2
    Resolving the error/warning directly. The theme prop is expected to be passed to the MyLoginPage component. But from the way that example was defined, you'll have to pass MyLoginPage directly to the <Admin> component. Therefore the best way, at this learning stage, is to just define a theme within that script file (in the place where MyLoginPage is defined).
// Add/update the following
import { createMuiTheme } from '@material-ui/core/styles';

// define a theme, for example...
const MyTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#000',
    },
    secondary: {
      main: '#fff',
    },
  },
});

/** 
 * Pass the defined theme to the "theme" prop
 * So in essence, your "theme" prop is never "undefined"
 * because it always falls back to the "default" MyTheme
 */
const MyLoginPage = ({ theme = MyTheme }) => {
  // other

  return (
     <ThemeProvider theme={theme}>
       <form onSubmit={submit}>
         <input ... /> 
         <input ... />
       </form>
       <Notification />
     </ThemeProvider>
  );
};
user_108494380
Related