CODEWITHSUNDEEP
javascriptreactjs
deinnielle
deinnielle

Reputation: 69

React useState and map()

I'm trying to make an comment input from map, but since I use the same useState all the input fields get changed. How can I target a specific input?

return (
  <div>
    {posts.map(post => (
      <div key={post.id}>
        <img
          src={`https://localhost:1111/api/posts/uploads/images/${post.content}`}
          alt={`${post.id}`}
        />
        <p>{post.description}</p>
        <span>{post.likes ? post.likes : 0}</span>
        <button onClick={() => like(post.id)}>Like</button>
        <Link to={`/post/${post.id}`}>Edit</Link>
        <button onClick={() => deletePost(post.id)}>Delete</button>
        <form onSubmit={uploadComment}>
          <input
            type="text"
            onChange={handleComment}
            value={comment}
            placeholder="Comment"
          />
        </form>
      </div>
    ))}
  </div>
)

Upvotes: 0

Views: 313

Answers (2)

Dimitri Lavren&#252;k
Dimitri Lavren&#252;k

Reputation: 4879

You have an own state per rendered post, which means that it is a use case for an own component:

function Post(post, deletePost) {
  const [comment, setComment] = useState('');
  const uploadComment = () => {}; // your code is missing
  return (
      <div key={post.id}>
        <img
          src={`https://localhost:1111/api/posts/uploads/images/${post.content}`}
          alt={`${post.id}`}
        />
        <p>{post.description}</p>
        <span>{post.likes ? post.likes : 0}</span>
        <button onClick={() => like(post.id)}>Like</button>
        <Link to={`/post/${post.id}`}>Edit</Link>
        <button onClick={() => deletePost(post.id)}>Delete</button>
        <form onSubmit={uploadComment}>
          <input
            type="text"
            onChange={e => setComment(e.target.value)}
            value={comment}
            placeholder="Comment"
          />
        </form>
      </div>
  )
}

Then your render function would look like this:

return (
  <div>
    {posts.map(post => <Post post={post} deletePost={deletePost} />)}
  </div>
)

Upvotes: 1

Ali
Ali

Reputation: 458

Consider using react useState hook per input.

Upvotes: 0

Related Questions