Objects are not valid as a React child. found: object with keys {background, color}-CodePudding

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.

here is my data..................

my Contextjs component......

import { createContext, useReducer } from "react";
export const themeContext = createContext();


const initialState = {darkMode : true};

const themeReducer = (state, action) =>{

    switch(action.type){
        case'toggle':
        return {darkMode : !state.darkMode};
        default:
            return state;
    }
};

export const ThemeProvider = (props)=>{

    const [state, dispatch] = useReducer (themeReducer, initialState);
    return(
        <themeContext.Provider value={{state, dispatch}}>
           {props.children}
        </themeContext.Provider>
    );
};

my AppJs component.......

import Navbar from "./Components/Navbar/Navbar";
import "./App.css"
import { Intro } from "./Components/Intro/Intro";
import Services from "./Components/Services/Services";
import Experience from "./Components/Experience/Experience"
import Works from "./Components/Works/Works"
import Portfolio from "./Components/Portfolio/Portfolio"
import Testimonials from './Components/Testtimonials/Testimonials'
import Contact from "./Components/Contact/Contact"
import Footer from "./Components/Footer/Footer"
import {themeContext} from './Context'
import { useContext  } from "react";



function App() {

  const theme = useContext(themeContext);
  const darkMode = theme.state.darkMode;

  return (
    <div className="App">

      style={{ 
           background : darkMode? 'black' : '',
           color : darkMode? 'white' : ''
       }}
      
      <Navbar />
      <Intro />
      <Services />
      <Experience />
      <Works />
      <Portfolio/>
      <Testimonials/>
      <Contact />
      <Footer />
      
    </div>
  );
}

export default App;

and here is IndexJs..........

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {ThemeProvider} from './Context';

ReactDOM.render(
  <ThemeProvider> 
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

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.

CodePudding user response：

You have to pass style prop to component.

<div
  className="App"
  style={{
    background: darkMode ? "black" : "",
    color: darkMode ? "white" : "",
  }}
>

I would rather prefer, create 2 classes dark and light and use like this:

<div className={`App  ${darkMode ? "dark" : "light"}`}>

CodePudding user response：

It's trying to render your style object as a child of the div, update it so it is an attribute of the div.

<div
    className="App"
    style={{
        background: darkMode ? "black" : "",
        color: darkMode ? "white" : "",
    }}
>
    <Navbar />
    <Intro />
    <Services />
    <Experience />
    <Works />
    <Portfolio />
    <Testimonials />
    <Contact />
    <Footer />
</div>