現在React✖︎Rails Gem"react_on_rails""webpacker"を使用。
以上の環境でcrud機能を作成しようと試みております。
現在のdbの中身はこのような状態です。
エラー内容
コンソール
Uncaught TypeError: Cannot read property 'map' of undefined
> User.all #<ActiveRecord::Relation [#<User id: 1, name: "user1", post: "test", created_at: "2020-08-06 03:17:25", updated_at: "2020-08-06 03:17:25">, #<User id: 2, name: "user2", post: "test2", created_at: "2020-08-06 03:17:45", updated_at: "2020-08-06 03:17:45">]> irb(main):025:0>
users_controller
def index @users = User.all end
index.html.erb
<%= react_component("IndexComponent", users: @users, prerender: false) %>
IndexComponent.jsx
import React from "react" export default class IndexComponent extends React.Component { constructor(props){ super(props) this.state = { users: [] }; } componentDidMount(){ this.setState({ users: this.props.users }) } render () { return ( <div> {this.state.users.map((user) => { return ( <div> <p>{user.name}</p> <p>{user.post}</p> </div> ); })} </div> ); } }
このような形で実装したのですが、@usersを出力することができません。
viewでどのようにして@usersをReactに渡すべきでしょうか。
また、Reactのコードも自信がありません。
ぜひ知見をお借りできればと思います。
よろしくお願いいたします。
あなたの回答
tips
プレビュー