From bcd79087d2bc1f114cf4ffd2a309b036329ea3c4 Mon Sep 17 00:00:00 2001 From: Shreyas Sreenivas <46835608+shreyas44@users.noreply.github.com> Date: Tue, 25 Aug 2020 19:00:09 +0530 Subject: [PATCH] Pass props when components rendered using children Created a childInstance which clones props.children and passes the props to it. Right now if the component to be rendered is placed between a set of tags, the props are not passed to that component. Cloning it and creating a new instance allows that. --- src/LiveRoute.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/LiveRoute.tsx b/src/LiveRoute.tsx index 27215b8..f404aa9 100644 --- a/src/LiveRoute.tsx +++ b/src/LiveRoute.tsx @@ -358,7 +358,7 @@ class LiveRoute extends React.Component { // normal render const props = { ...context, location, match: matchOfPath, ensureDidMount: this.getRouteDom } - // Preact uses an empty array as children by + // React uses an empty array as children by // default, so use null if that's the case. if (Array.isArray(children) && children.length === 0) { children = null @@ -384,10 +384,11 @@ class LiveRoute extends React.Component { } const componentInstance = component && React.createElement(component, props) + const childInstance = children && React.cloneElement(children, props) // clone element to pass props to the child element // normal render from Route return children && !isEmptyChildren(children) - ? children + ? childInstance : matchAnyway ? component ? componentInstance