title: Objects are not valid as a React child. found: object with keys {background, color}
body: <p>i am trying to setting up darkMode button, but i got this error ... Uncaught Error: Objects are not valid as a React child (found: object with keys {background, color}). If you meant to render a collection of children, use an array instead.</p>
  <p>here is my data..................</p>
  <blockquote>
  <p>my Contextjs component......</p>
  </blockquote>
  <pre><code>import { createContext, useReducer } from &quot;react&quot;;
  export const themeContext = createContext();
  
  
  const initialState = {darkMode : true};
  
  const themeReducer = (state, action) =&gt;{
  
      switch(action.type){
          case'toggle':
          return {darkMode : !state.darkMode};
          default:
              return state;
      }
  };
  
  export const ThemeProvider = (props)=&gt;{
  
      const [state, dispatch] = useReducer (themeReducer, initialState);
      return(
          &lt;themeContext.Provider value={{state, dispatch}}&gt;
             {props.children}
          &lt;/themeContext.Provider&gt;
      );
  };
  
  </code></pre>
  <blockquote>
  <p>my AppJs component.......</p>
  </blockquote>
  <pre><code>import Navbar from &quot;./Components/Navbar/Navbar&quot;;
  import &quot;./App.css&quot;
  import { Intro } from &quot;./Components/Intro/Intro&quot;;
  import Services from &quot;./Components/Services/Services&quot;;
  import Experience from &quot;./Components/Experience/Experience&quot;
  import Works from &quot;./Components/Works/Works&quot;
  import Portfolio from &quot;./Components/Portfolio/Portfolio&quot;
  import Testimonials from './Components/Testtimonials/Testimonials'
  import Contact from &quot;./Components/Contact/Contact&quot;
  import Footer from &quot;./Components/Footer/Footer&quot;
  import {themeContext} from './Context'
  import { useContext  } from &quot;react&quot;;
  
  
  
  function App() {
  
    const theme = useContext(themeContext);
    const darkMode = theme.state.darkMode;
  
    return (
      &lt;div className=&quot;App&quot;&gt;
  
        style={{ 
             background : darkMode? 'black' : '',
             color : darkMode? 'white' : ''
         }}
        
        &lt;Navbar /&gt;
        &lt;Intro /&gt;
        &lt;Services /&gt;
        &lt;Experience /&gt;
        &lt;Works /&gt;
        &lt;Portfolio/&gt;
        &lt;Testimonials/&gt;
        &lt;Contact /&gt;
        &lt;Footer /&gt;
        
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <blockquote>
  <p>and here is IndexJs..........</p>
  </blockquote>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import {ThemeProvider} from './Context';
  
  ReactDOM.render(
    &lt;ThemeProvider&gt; 
      &lt;App /&gt;
    &lt;/ThemeProvider&gt;,
    document.getElementById('root')
  );
  
  
  </code></pre>
  <blockquote>
  <p>and error is:- Uncaught Error: Objects are not valid as a React child (found: object with keys {background, color}). If you meant to render a collection of children, use an array instead.</p>
  </blockquote>