CODEWITHSUNDEEP
reactjsrouteschildrenclone-element
Wilco Swart
Wilco Swart

Reputation: 1

Add event listener to routes childs

In React I want to add an event handler to the parent of route childs off the routes collection. I have tried already a lot but I don't get it working.

function App() {
return (
    <WebsiteLayout>
        <Routes>
            <Route path="/">
                <Route index element={<Home />} />
                <Route path="/login" element={<Login />} />
                <Route path="/rubrieken" element={<Rubrieken />} />
                <Route path="/producten" element={<Producten />}/>
                <Route path="/product" element={<Product />} />
                <Route path="/bestellen" element={<Bestellen /> } />
            </Route>
        </Routes>
    </WebsiteLayout>
);}


function RemapChildren() {
    try {
        return (
            React.Children.map(children, (child) => {
                React.Children.map(child.props.children, (subchild) => {
                    React.Children.map(subchild.props.children, (routechild) => {
                        return (React.cloneElement(routechild, { setShoppingCartItems: { updateShoppingCartItems } }))
                    });
                    return (React.cloneElement(subchild));
                });
                return (React.cloneElement(child));
            }));
    }
    catch (err) {
        var test = err;
    }
}

function renderPage() {
    return (
       <RemapChildren />
    );
}

As you can see I tried to Remap the children and a an eventhandler to it using React.cloneElement. However the props in my routed components are empty.

Upvotes: 0

Views: 29

Answers (0)

Related Questions