Putting it all Together Link to heading

<div class="TodoItem">

  <% if @editing %>

    <%= form_with(model: @todo_item) do |f| %>

      <%= f.text_field :text %>

      <%= f.submit %>

    <% end %>

  <% else %>

    <%= @todo_item.text %>

    <%= button_tag(

      "Edit",

      data: { action: "click->todoitemcomponent#edit" }

    ) %>

    <%= button_to(

      "Delete",

      todo_list_todo_item_path(

        @todo_item.todo_list_id,

        @todo_item

      ),

      rerender: :parent,

      method: :delete,

      form: {

        data: {

          turbo: true,

          turbo_stream: true

        }

      }

    ) %>

  <% end %>

</div>

class TodoItemComponent < ApplicationComponent

  include LiveComponent::Base

  def initialize(todo_item:, editing: false)

    @todo_item = todo_item

    @editing = editing

  end

end

import { live, LiveController } from "@camertron/live-component";

@live("TodoItemComponent") // this is the Ruby class name

export class TodoItemComponent extends LiveController {

  edit() {

    this.render((component) => {

      component.props.editing = true;

    });

  }

}

<h1><%= @todo_list.name %></h1>

<ul>

  <% todo_items.each do |todo_item| %>

    <li><%= todo_item %></li>

  <% end %>

</ul>

<%= form_with(

  model: [@todo_list, @todo_list.todo_items.build],

  rerender: :self

) do |f| %>

  <%= f.text_field :text %>

  <%= f.submit "Add todo item" %>

<% end %>

class TodoListComponent < ApplicationComponent

  include LiveComponent::Base

  renders_many :todo_items, TodoItemComponent

  def initialize(todo_list:)

    @todo_list = todo_list

  end

end

Rails.application.routes.draw do

  resources :todo_lists do

    resources :todo_items

  end

end

# frozen_string_literal: true

class TodoItemsController < ApplicationController

  def update

    @todo_item = TodoItem.find(params[:id])

    @todo_item.update(todo_item_params)

  end

  def create

    @todo_list = TodoList.find(params[:todo_list_id])

    @todo_item = @todo_list.todo_items.create(todo_item_params)

  end

  def destroy

    TodoItem.delete(params[:id])

  end

  private

  def todo_item_params

    params.require(:todo_item).permit(:text)

  end

end

class TodoListsController < ApplicationController

  def show

    @todo_list = TodoList

      .includes(:todo_items)

      .find(params[:id])

  end

end

class TodoItem < ApplicationRecord

  belongs_to :todo_list

end

class TodoList < ApplicationRecord

  has_many :todo_items

end

<%= live.rerender(todo_list: @todo_list) do |todo_list_component| %>

  <% todo_list_component.with_todo_item(todo_item: @todo_item) %>

<% end %>

<%= live.rerender do |todo_list_component| %>

  <% todo_list_component.todo_items.reject! do |todo_item_component| %>

    <% todo_item_component.todo_item.id == params[:id].to_i %>

  <% end %>

<% end %>

<%= live.rerender(todo_item: @todo_item, editing: false) %>

<%= render(TodoListComponent.new(todo_list: @todo_list)) do |todo_list_component| %>

  <% @todo_list.todo_items.each do |todo_item| %>

    <% todo_list_component.with_todo_item(todo_item: todo_item) %>

  <% end %>

<% end %>