How to fix this error when using React Context

Question

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;

Thats what I get each time.....I tried adding the following bit but still the same error... static propTypes = { children: PropTypes.node.isRequired } — Neelam
Resolved the error- I had snackbarprovider as snackbar in my app.js — Neelam

Chase Owens Chase Owens · Accepted Answer · 2019-05-03T02:03:44

0

votes

Do the warnings provide any information?

How to fix this error when using React Context

1 Answers