Error: StateProvider(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

Issue

I have this error as Error: StateProvider(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. And it is coming due to this section. I am working on my project and using react and redux.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { StateProvider } from './StateProvider';
import { reducer, initialState } from './reducer';

ReactDOM.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reducer={reducer}>
       <App />
    </StateProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

---

My App compo is like this

import './App.css';
import Header from "./Header";
import Home from "./Home";
import Checkout from "./Checkout";
import {BrowserRouter as Router, Switch} from "react-router-dom";

function App() {
  return (
    <Router>
       <div className="app">
         <Header/>
         <Switch>
            <Router path="/checkout">
               <Checkout/>
            </Router>
            <Router path="/">
               <Home/>
            </Router>
         </Switch>
       </div>
    </Router>
  );
}

export default App;

---

And my reducer is like this

const initialState = {
    basket : [],
};

const reducer = (state, action) => {
     
    switch(action.type){
        case "ADD_TO_BASKET": 
          return{
            ...state,
              basket: [...state, action.item],
          };

        default:
            return state;
    }
};

export  {reducer, initialState};

---

And my stateProvider is like this

import React, { createContext, useContext, useReducer } from "react";


export const StateContext = createContext();


export const StateProvider = ({ reducer, initialState, children}) => {
     
    <StateContext.Provider value={useReducer(reducer, initialState)}>
        {children}
    </StateContext.Provider>
};


export const useStateValue = () => useContext(StateContext);

Solution

You are missing the return statement here:

export const StateProvider = ({ reducer, initialState, children}) => {
     
    return (<StateContext.Provider value={useReducer(reducer, initialState)}>
        {children}
    </StateContext.Provider>)
};

Answered By - lissettdm