How would I go about this in KotlinJS with React? ...

# javascript

[Hildebrandt Tobias]

How would I go about this in KotlinJS with React? https://github.com/rohan-paul/Awesome-JavaScript-Interviews/blob/master/React/pass-prop-to-component-rendered-by-React-Router.md

The part about providing props at the Routing level:

<Route
  path='/dashboard'
  render={(props) => <Dashboard {...props} isAuthed={true} />}
/>

The RouteObject doesn't expose a render field.

[turansky]

RouteObject.element is render result.
You can use it.

RouteObject(
    element = MyPage.create { /* my props */ }
)

[turansky]

In my cases I use Context to pass configuration, to avoid redundant renders.

[Hildebrandt Tobias]

In the Rohen Paul article he also mentions that he uses render to prevent redundant renders.
But element would rerender every time as I understand it?
I wanted to pass different Props for different routes since I want to reuse
the same component just with differents items (example):

fun exampleRoutes() = jso<RouteObject> {
    path = "production"
    Component = SubDrawer { drawerItems = productionDrawerItems } // This doesn't work
    ErrorBoundary = ErrorView
    children = arrayOf(
        jso {
            path = "plan"
            Component = ProductionPlanView
            ErrorBoundary = ErrorView
        },
        jso {
            path = "step"
            Component = ProductionStepView
            ErrorBoundary = ErrorView
        },
        jso {
            path = "task"
            Component = ProductionTaskView
            ErrorBoundary = ErrorView
        },
    )
}

[turansky]

Component property - is what I use in my projects.

[turansky]

Required data you can pass via context

[turansky]

If no - you can use memorization for created element to avoid redundant renders.
It's what React Compiler will do.

[turansky]

In common case components are preferable

[Hildebrandt Tobias]

My problem is that I want to call the component with different Props depending on the route.
The alternative would be to have one component for each SubDrawer but that would be a lot of redundant
code. I don't know how I would do this with context.
Since the drawerItems don't change I will try the memoization approach. Thank you.

[Hildebrandt Tobias]

I now have it like this, I will need to check later if it does what I want:

fun productionRoutes() = jso<RouteObject> {
    path = "production"
    element = memo(SubDrawer).create { drawerItems = productionDrawerItems }
    ErrorBoundary = ErrorView
    children = arrayOf( ... )
}

[turansky]

It must be like this:

val myProductionElement = useMemo {
    SubDrawer.create { drawerItems = productionDrawerItems }
}

[Hildebrandt Tobias]

Okay, thank you.