Can someone explain or point me in the direction of some documentation on how to use a `react.Compon...

# react

[Sean Proctor]

Can someone explain or point me in the direction of some documentation on how to use a react.Component with functional components? It seems like every tutorial is only using FC 's or is pretty outdated. I'm trying to create an error boundary, and I'm not that comfortable with React to begin with.

[turansky]

react.Component - parent for class components (legacy)
react.FC - factory for function components (modern)

[turansky]

Probably this hook will be helpful

[Sean Proctor]

Thanks. That doesn't really solve my issue though. That library provides a React Component that I need to use and I still don't know how. Specifically, useErrorBoundary() returns ErrorBoundary component. How do I use that with functional components?

[turansky]

val App = FC {
    ...
    
    ErrorBoundary {
        div {
            ComponentWithError()
        }
    }
}

[Sean Proctor]

That's not working for me.

[Sean Proctor]

I tried that two different ways, because I wasn't sure which you meant:
class ErrorBoundary(props: PropsWithChildren) : Component<PropsWithChildren, ErrorBoundaryState>(props) { ... }

and:

val App = FC<Props> {
    val errorState = useErrorState(jso())
    errorState.ErrorBoundary { ... }
}

Where errorState.ErrorBoundary is a ReactElement. Maybe that's my mistake. I couldn't get the bindings to generate for use-error-boundary, so it's possible that my translation is wrong.

[Sean Proctor]

Ah, it was. ErrorBoundary should've been an FC. Thanks!

[turansky]

Works?

[Sean Proctor]

Yup! Thanks a lot for your help. If in the future I wanted to use a class Component from a functional component, how would I do it? something like:

val App = FC<Props> {
    ErrorBoundary { ... }
}

doesn't work when error boundary is defined as a subclass of Component.

[iari]

@Sean Proctor would you mind sharing your bindings?

[CLOVIS]

Hi, not sure if it's going to help you, but here's how I used it: https://gitlab.com/opensavvy/formulaide/-/commit/4120ca57517a956a5f54ddeed584ec8aae8cca14

[CLOVIS]

Usage: https://gitlab.com/opensavvy/formulaide/-/blob/main/ui/src/main/kotlin/formulaide.ui/App.kt#L262

[Sean Proctor]

Sorry, I was traveling for the last couple of days. I just put them in a gist for you: https://gist.github.com/sproctor/3a28491075723b54dedd4f5a1e0ae302