Suggestion to make less state when using Phoenix stateless components

Phoenix Forum Questions / Help
1

Hi friend, I have read the documents and could not find the option I want, or it is exist and I do not know about it.

Imagine you have a stateless component with different params like this:

<.tab_form data={data} type="title" key={key} myself={@myself} />
<.tab_form data={data} type="tab" key={key} myself={@myself} />
<.tab_form data={data} type="text" key={key} myself={@myself} />

The type is different and I want to call one of them without changing or creating another state, something like this:

<div
  class="flex flex-row w-full justify-start items-start gap-2 cursor-pointer"
  phx-click={
    JS.toggle(to: "#form-#{key}")
    |> JS.set_attribute({"data-type", "section"}, to: "#form-#{key}")
    |> JS.toggle(to: "#title-#{key}")
  }
>

After that I can be able to get it (JS.set_attribute({"data-type", "section"}, to: "#form-#{key}")) as attr :rest, :global.
I just gave an example of my thought, because I have many LiveComponents that have many nested Phoenix stateless components that very hard to create a state in Live module.

For example in ReactJS I create some small local state inside the component I want and make the code more clear

Thank you for all your efforts and the tools like Phoenix LiveView, it is very very interesting