How can I connect a post to its username? - reactjs

Question

I'm using react for the client side and rails for the server.
When trying to link the post to its username I get 'undefined'.
If I try user={post.user_id} to get the user_id, it works fine, but I want to show the username.
PostList.jsx
{posts.map((post) => (
<>
<Post
key={post.id}
title={post.title}
content={post.content}
user={post.user.username}
id={post.id}
getPosts={getPosts} />
</>
Post.jsx
const Post = ({title, content, user, id, getPosts}) => {
return (
<div className='post-container'>
<div className='post-header'>
<div className='post-title-user'>
<h2>{title}</h2>
<span>Posted by: #{user}</span>
</div>
</div>
<p>{content}</p>
</div>
)
}
export default Post
schema.rb
create_table "posts", force: :cascade do |t|
t.string "title"
t.text "content"
t.datetime "created_at", precision: 6, null: false
t.datetime "updated_at", precision: 6, null: false
t.integer "user_id", null: false
t.index ["user_id"], name: "index_posts_on_user_id"
end
create_table "users", force: :cascade do |t|
t.string "username"
t.string "password_digest"
t.datetime "created_at", precision: 6, null: false
t.datetime "updated_at", precision: 6, null: false
end
user.rb
class User < ApplicationRecord
has_secure_password
has_many :posts
end
post.rb
class Post < ApplicationRecord
belongs_to :user
end

Answer 1

I think you should use active_model_serializers gem
Step1: add gemfile gem 'active_model_serializers'
Step2: bundle
Step3: rails g serializer post
In posts_controller.rb
class PostsController < ApplicationController
def index
posts = Post.all
render json: {
message: 'Get posts',
data: ActiveModel::Serializer::CollectionSerializer.new(posts, each_serializer: PostSerializer)
}
end
end
In post_serializer.rb
class PostSerializer < ActivieModel::Serializer
attributes :id, :title, :content, :username
def username
#You try byebug and check object
object.username
end
end