Estoy tratando de configurar el botón DarkMode, pero recibí este error ... Error no detectado: los objetos no son válidos como un niño React (encontrado: objeto con teclas {fondo, color}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.

aqui estan mis datos..................

mi componente Contextjs ......

 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> ); };

mi componente AppJs .......

 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;

y aquí está 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') );

y el error es: - Error no detectado: los objetos no son válidos como hijos de React (encontrado: objeto con claves {fondo, color}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.