How to Fix the “React error ‘Failed propType: Invalid prop `children` supplied to `Provider`, expected a single ReactElement'” Error When Developing React Apps with Redux?

Sometimes, we may run into the "React error ‘Failed propType: Invalid prop children supplied to Provider, expected a single ReactElement’" error when developing React apps with Redux.

In this article, we’ll look at how to fix the "React error ‘Failed propType: Invalid prop children supplied to Provider, expected a single ReactElement’" error when developing React apps with Redux.

Fix the "React error ‘Failed propType: Invalid prop children supplied to Provider, expected a single ReactElement’" Error When Developing React Apps with Redux

To fix the "React error ‘Failed propType: Invalid prop children supplied to Provider, expected a single ReactElement’" error when developing React apps with Redux, we should make sure the content in between the Provider tags are React components.

For instance, we write:

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import App from "./App";

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case "counter/incremented":
      return { value: state.value + 1 };
    case "counter/decremented":
      return { value: state.value - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
  rootElement
);

App.js

import React from "react";
import { useDispatch, useSelector } from "react-redux";

export default function App() {
  const count = useSelector((state) => state.value);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch({ type: "counter/incremented" })}>
        increment
      </button>
      <p>{count}</p>
    </div>
  );
}

to create the counterReducer reducer function.

Then we create the Redux store with createStore.

Next, we wrap Provider around the App component and set store as the value of the store prop.

Then in App, we get the store’s state with the useSelecttor hook.

And we use the useDispatch hook to return the dispatch function, which we call in the onClick handler with an object with the Redux store action type to increment the store’s state.

Therefore, when we click increment, we see count increase by 1.

Conclusion

To fix the "React error ‘Failed propType: Invalid prop children supplied to Provider, expected a single ReactElement’" error when developing React apps with Redux, we should make sure the content in between the Provider tags are React components.