By Neelam


2019-05-03 01:07:56 8 Comments

I'm trying to implement React-context in my application to get rid of the props drilling. While creating the contextProvider, I'm getting the following 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".

const SharedThemeContext = React.createContext();

export class SharedThemeProvider extends Component {

  static propTypes = {
    children: PropTypes.func.isRequired
  }
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
      message: '',
    };
  }

  openSnackbar = (message) => {
    this.setState({
      message,
      isOpen: true,
    });
  };

  closeSnackbar = () => {
    this.setState({
      message: '',
      isOpen: false,
    });
  };

  render() {
    const { children } = this.props;

    return (
      <SharedThemeContext.Provider
        value={{
          openSnackbar: this.openSnackbar,
          closeSnackbar: this.closeSnackbar,
          snackbarIsOpen: this.state.isOpen,
          message: this.state.message,
        }}
      >

        {children}
      </SharedThemeContext.Provider>
    );
  }
}

export const SharedThemeConsumer = SharedThemeContext.Consumer;

1 comments

@Chase Owens 2019-05-03 02:03:44

Do the warnings provide any information?

Related Questions

Sponsored Content

1 Answered Questions

[SOLVED] React Context API not working Error: Element type is invalid

2 Answered Questions

Tab Error in React : Check the render method of TabPanel

1 Answered Questions

[SOLVED] Element type is invalid React

1 Answered Questions

1 Answered Questions

[SOLVED] Material UI component breaking React application

1 Answered Questions

[SOLVED] Where Do I put the the MuiThemeProvider Component?

Sponsored Content