Hyperapp: how to Create state and properties local to a Components

[ghost]

First off, much thanks to @hyperapp team for great job on HA.

I recently I created a <Navbar/> component in jsx to be added to a view component.

I'm very strict about how I use shared state store tree and since this component doesn't share state with any other component, I needed a way to create state local to it in hyperapp (I'm a noob! Forgive me). Something similar to react's this.setState

Furthermore, i tried to toggle a classList item visibility in the component. I solved this by..

<div class="nav-bar menu" onclick={ document.querySelector("nav-bar menu').toggleClassList("is active") } </div>

This solved the problem but I was wondering if it was the right, standard and performant way to manipulate the local state of component properties/nodes in hyperapp.

I have seen hyperapp docs on dumb components, but is there another way i can create components and manipulate it's properties state without actioning it from shared state tree.

[jorgebucaran]

@Irelokeh No, there is no .setState or any way to create stateful to components.

Like a light switch that can be ON/OFF, a transistor that can be active, saturated or cut off or a state-of-the-art CPU chip, your app is a complex machine that can be in many different state combinations at a time. This state is represented in a plain JavaScript object. The view translates the state into a user interface. The view can be broken up into components. Components are always pure. They help you organize your view and reuse markup. Actions create new state arrangements causing the view to re-rendered. That's it.

If you need to toggle a class in a component:

https://codepen.io/anon/pen/jKyeYK

import { h, app } from "hyperapp"

const state = {
  isActive: false
}

const actions = {
  toggle: () => (state, actions) => ({ isActive: !state.isActive })
}

const view = (state, actions) => (
  <h1 class={state.isActive && "is-active"} onclick={actions.toggle}>
    Hello!
  </h1>
)

app(state, actions, view, document.body)

If you need to set more than one class based on different state props, see also:

• classcat
• classNames

[zaceno]

Local conponent state is possible, although it could be seen as a hack, depending on your point of view

https://zaceno.github.io/hypercraft/post/stateful-components/

[ghost]

Thanks so much @Jorgebucaran and @zaceno for the quick, precise response and resources... I was only thinking about components I forgot state needs to be rendered by view function through them.

Thanks, the classCat module is awesome.

I'm hoping to become a hyperapp tutorial/docs contributor so I needed to know exactly what I'm doing to be able to explain to others.

😎 Just one more question...

Why is hyperapp so awesome?