What is the best way to sort through custom components within children in Solid JS?

Question

What is the best way to sort through custom components within children in Solid JS?

I have been working on developing a scene switcher for my personal application, and I thought of creating a custom component called SceneSwitcher. Inside this component, I plan to add various scenes that can be rendered. Here's an example:

<SceneSwitcher>
    <LoadingScene />
    <AppScene />
    <LoginScene />
</SceneSwitcher>

SceneSwitcher.tsx

export default function SceneSwitcher() {
    const [scene, setScene] = createSignal("");

    ...

    return (
        <>
            {props.children.find(e => e.id === scene()) ?? <div></div>}
        </>
    );
}

However, I'm facing an issue where props.children.find always returns undefined, even when the value of scene() matches one of the IDs.

IDs on Scenes: LoadingScene.tsx

export default function LoadingScene() {
    ...
    return (
        <div id="loading">
            <h1>Loading content...</h1>
        </div>
    );
}

Just a few days ago, I started exploring component-style frameworks, although I have experience in programming websites using vanilla JavaScript for 4 years. This project is an opportunity for me to delve deeper into component-style frameworks and explore different approaches to problem-solving.

javascript typescript jsx tsx solid-js

Answer 1

Answer №1

Let's start by examining the requirements:

We must keep track of the active scene, which can be achieved by using a signal.
We need a method to switch between different scenes, so we utilize a list of scene names with event handlers to update the active scene.
A filter is required to categorize scenes based on their names and whether they are active or not. To accomplish this, we employ Switch/Match components.

const App = () => {
  const [active, setActive] = createSignal('loading');

  return (
    <div>
      <ul>
        <li onClick={() => setActive('loading')}>Loading</li>
        <li onClick={() => setActive('app')}>App</li>
        <li onClick={() => setActive('login')}>Login</li>
      </ul>
      <Switch>
        <Match when={active() === 'loading'}>
          <Loading />
        </Match>
        <Match when={active() === 'app'}>
          <App />
        </Match>
        <Match when={active() === 'login'}>
          <Login />
        </Match>
      </Switch>
    </div>
  );
};

If you are looking to implement this functionality, a router can be helpful. The URL or pathname can be used to track the active scene, while navigation can be used to switch between scenes. The Route component can associate components with specific paths.

https://github.com/solidjs/solid-router

Answer 2

Let's start by examining the requirements:

We must keep track of the active scene, which can be achieved by using a signal.
We need a method to switch between different scenes, so we utilize a list of scene names with event handlers to update the active scene.
A filter is required to categorize scenes based on their names and whether they are active or not. To accomplish this, we employ Switch/Match components.

const App = () => {
  const [active, setActive] = createSignal('loading');

  return (
    <div>
      <ul>
        <li onClick={() => setActive('loading')}>Loading</li>
        <li onClick={() => setActive('app')}>App</li>
        <li onClick={() => setActive('login')}>Login</li>
      </ul>
      <Switch>
        <Match when={active() === 'loading'}>
          <Loading />
        </Match>
        <Match when={active() === 'app'}>
          <App />
        </Match>
        <Match when={active() === 'login'}>
          <Login />
        </Match>
      </Switch>
    </div>
  );
};

If you are looking to implement this functionality, a router can be helpful. The URL or pathname can be used to track the active scene, while navigation can be used to switch between scenes. The Route component can associate components with specific paths.

https://github.com/solidjs/solid-router

What is the best way to sort through custom components within children in Solid JS?

Answer №1

Similar questions

Using VueJS to navigate to a specific route and pass parameters along with the

Combining Multiple Properties in a Single-File Component with Vue.js 2

When running `aws-cdk yarn synth -o /tmp/artifacts`, an error is thrown stating "ENOENT: no such file or directory, open '/tmp/artifacts/manifest.json'"

A guide on updating URLs that are not enclosed within an anchor tag using JavaScript

The ts-jest node package's spyOn method fails to match the specified overload

The argument provided is a string type, which cannot be assigned to a parameter expecting an object with a 'results' property of type string

ajax fails to send the variables, instead sending undefined values

Encountering difficulties when attempting to load a module with the "js" extension in a TypeScript environment

What is the best way to compare two 2D arrays in JavaScript?

Simulating a winston logger in jest testing

The promise is unexpectedly fulfilled ahead of schedule without returning the expected value from an AXIOS call

Exploring the latest updates in MUI modern version

Issue with minifying AngularJS and TypeScript route configuration for safe minification

Node.js is having trouble locating a module that has been installed

Create an XML document using the DOM structure, but exclude specific elements in the process

Testing Angular applications using Karma

AngularJS - Filter out items from ng-repeat that match specific string criteria

disappearing the link in a window.open popup

What could be causing the partial to not load JavaScript properly?

``If you're looking to retrieve, modify, and display information in your Vue application with the help of