Component Logic

Component Logic completes the needs of more advanced cases where you don't want logic scattered across many instances inside your component but prefer or need that logic to be in one place. It's also an excellent place to use any hooks in what we think is the best tool to use them: code.

📘
The concept behind Component logic
When it came to more complex logic and behavior, we saw that users had to code and repeat logic on event handlers and binds. We also found that using hooks with components was not ideal, and their interface made them more confusing than they should have been.
Our solution was to hook into the component definition header, where you can use hooks to build up logic and pass whatever you want down to be available throughout your component.

Stater code when selecting the `Logic` code in the composition component configuration code.

By changing the code, we can then use some hooks, keep track of the state, and pass variables back to the component for later use.

Using `useState` and setting the `isOn` variable to a string depending on the state value.

Now when we look at the ButtonCode components onClick property, we can see and use our values returned from the function above.

Using the returned vars being passed down from the component logic — Using the returned vars passed down from the component logic

To complete this example, we need to ensure that the children slot for our text receives the proper variables. This example is just returning the isOn variable, but you can return more or all of them when needed.

returning the `isOn` variable so that the typography component can use it.

adding the value to the typography text component to make it dynamic

Now we have a controlled button using the state to keep track of the value is true or false and returning a string of on or off depending on the value.

Component Logic - Intro

📘
The concept behind Component logic

📘The concept behind Component logic

📘
The concept behind Component logic