By Guillaume Briday
import { useState } from 'react'
function MyComponent() {
const [name, setName] = useState('')
const [items, setItems] = useState([])
useEffect(() => {
fetch(`/my/awesome/api?name=${name}`)
.then(res => res.json())
.then((data) => {
setItems(data)
})
}, [name])
return (
...
{items.map(item => (
-
{item.name}
))}
)
}
From manipulating DOM with jQuery to manipulate Data with React.
Maybe you just need Turbo with Stimulus...
And https://www.stimulus-components.com/ π
<%# app/views/todos/edit.html.erb %>
Editing message
<%= turbo_frame_tag @todo do %>
<%# form_with ... %>
<% end %>
See: Modern Datatables
class CommentsController < ApplicationController
def index
budget = Budget.find(params[:budget_id])
render partial: 'comments/comments', locals: { comments: budget.comments }
end
end
<%= turbo_frame_tag :comments, src: comments_path(budget_id: @budget.id), loading: 'lazy' do
<%# Adding a nice loader that will be replaced once the partial gets loaded. %>
<% end %>
format.turbo_stream do
render turbo_stream: [
turbo_stream.append(...),
turbo_stream.replace(...)
]
end
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>