Search code examples
javascriptreactjsloopscomments

How to pass the job.id from a loop to the payload for storing new comments on the comment table when a user comments on a specific job?


I have been attempting to solve a problem where I need to pass the item.id value from a loop to the payload in order to store new comments on the comment table when a user comments on a specific job. Despite trying various solutions, I have been unable to make progress

<div class="posts-section">
  <div class="post-bar">
    <div class="post_topbar">
      <div class="usy-dt">
        <img src={asset('small', item.users.profil_picture)} alt="" />
        <div class="usy-name">
          <h3 key={index}>{item.users.name}</h3>
          <span>
            <img src="images/clock.png" alt="" />
            {time(item.created_at)}

            {/* { time(item.created_at)} */}
            {/* {timePassed} */}
          </span>
        </div>
      </div>

  <Form onSubmit={handleSubmit} type="submit">
    <InputGroup className="mb-3 comment-sect">
      <InputGroup.Text id="inputGroup-sizing-default">
        <Image src={asset('small', currentUser.profil_picture)} rounded className="profil-comment" />
      </InputGroup.Text>

      <Form.Control
        as="textarea"
        rows={1}
        onChange={handleTextareaChange}
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
        // className={textareaValue.trim() !== '' ? 'filled' : ''}
      />
      <div
        className={`comment-send-container ${textareaValue.trim() !== '' ? 'active-icon' : 'disable-icon'}`}
        onClick={handleSubmit}
        value={textareaValue}
      >
        <FontAwesomeIcon icon={faPaperPlane} className="comment-send-icon" />
      </div>
    </InputGroup>
  </Form>

const handleSubmit = e => {
  e.preventDefault()
  const payload = {
    comment: textareaValue,
    user: currentUser.id,
  }
  console.log(payload)
}

Solution

  • <Form onSubmit={{(e) => handleSubmit(e,item)}} type="submit">
    

    This item you can get in your function

      const handleSubmit=(e,item)=>{
            e.preventDefault();
            const payload={
                // jobId : item.id **Add your key**
                comment:textareaValue,
                user:currentUser.id,
             }
             console.log(payload);
    }