Child components

[se-andbjo]

When passing a child component into my custom component it doesn't seem to render. How do I do that?

Example: https://codesandbox.io/p/sandbox/hello-world-forked-93tj8k

[jacobjuul]

use <slot /> instead of children

https://codesandbox.io/p/sandbox/hello-world-forked-px4kdh?file=%2Fsrc%2Findex.tsx%3A7%2C1

[globallyunique]

I'm trying to use r2wc to convert the React components of the elastic-search UI framework to use in a svelte app. Several of the components need the children passed as a function to the parent React r2wc component. I can't change the code of the elastic search components to use a slot to pass the children. The specific place I'm stuck is the WithSearch component shown below. Is there a way to pass the r2wc versions of the ErrorBoundary, Layout, SearchBox components as the children of WithSearch ?

  <WithSearch mapContextToProps={({ wasSearched }) => ({ wasSearched })}>
    {({ wasSearched }) => {
      return (
        <div className="App">
          <ErrorBoundary>
            <Layout
              header={
                <SearchBox
                  autocompleteMinimumCharacters={3}
                  autocompleteResults={{
                    linkTarget: "_blank",
                    sectionTitle: "Results",
                    titleField: "title",
                    urlField: "url",
                    shouldTrackClickThrough: true
                  }}
                  autocompleteSuggestions={true}
                  debounceLength={0}
                />
              }
              sideContent={
                <div>
                  {wasSearched && <Sorting label={"Sort by"} sortOptions={[]} />}
                  <Facet key={"1"} field={"genre.keyword"} label={"genre"} />
                  <Facet key={"2"} field={"actors.keyword"} label={"actors"} />
                  <Facet key={"3"} field={"directors.keyword"} label={"directors"} />
                  <Facet key={"4"} field={"released"} label={"released"} />
                  <Facet key={"4"} field={"imdbRating"} label={"imdb rating"} />
                </div>
              }
              bodyContent={<Results shouldTrackClickThrough={true} />}
              bodyHeader={
                <React.Fragment>
                  {wasSearched && <PagingInfo />}
                  {wasSearched && <ResultsPerPage />}
                </React.Fragment>
              }
              bodyFooter={<Paging />}
            />
          </ErrorBoundary>
        </div>
      );
    }}
  </WithSearch>