How to send multiple context in Outlet Context? react-router-dom v6

user_13614867 0
Viewed 41

First of all, I use react-router-dom v6 in my project. As you know, it has the Outlet which provides to manage routes. The example below works perfectly

This is the parent route. layout.js

    export default function Layout() {
            const [darkMode, setDarkMode] = useState(false);
        
    return (
    
    /* Header*/
    
    /* Content*/
    <Outlet context={[darkMode, setDarkMode]} />
    
    /* footer*/
                
    )
}

This is the child route. login.js

export default function Login() {
             const [darkMode, setDarkMode] = useOutletContext();

    return (
/*Some Codes*/    
    )
}

When I want to send multiple props with context, it doesn't work.

Like this:

export default function Layout() {
                const [darkMode, setDarkMode] = useState(false);
            

const [color, setColor] = useState("#fff");
    
        return (
    
        /* Header*/
    
        /* Content*/
        <Outlet context={{ darkMode: [darkMode, setDarkMode], color: [color, setColor] }} />
    
        /* footer*/
    
        )
    }
    
    


export default function Login() {
                 const [darkMode, setDarkMode] = useOutletContext();
    const [color, setColor] = useOutletContext();
    
        return (
    /*Some Codes*/    
        )
    }

How can I send multiple props with Outlet Context? Is it possible?

react-router-dom reactjs javascript
2 Answers

In the first code example the Outlet's context value is [darkMode, setDarkMode], and the code is correctly using array destructuring assignment to access darkMode and setDarkMode.

<Outlet context={[darkMode, setDarkMode]} />

...

const [darkMode, setDarkMode] = useOutletContext();

Now in the second example the Outlet is providing a context value of a different shape, { darkMode: [darkMode, setDarkMode], color: [color, setColor] }. It's instead now an object with darkMode and color properties. Outlet context consumers now must use object destructuring assignment to access the values.

<Outlet
  context={{
    darkMode: [darkMode, setDarkMode],
    color: [color, setColor],
  }}
/>

...

const { darkMode, color } = useOutletContext();
// darkmode -> [darkMode, setDarkMode]
// color    -> [color, setColor]
darkMode.darkMode
darkMode.setDarkMode
... etc...

You can combine the object destructuring with variable renaming and array destructuring assigment as well.

const {
  darkMode: [darkMode, setDarkMode],
  color: [color, setColor],
} = useOutletContext();
user_86908570

i Think you are passing both color and setcolor thats wrong through props we can only pass only data that is in our color , so try only passing color not setColor and also if there is still issue then remove your array also

user_197256490
Related