Debug School

rakesh kumar
rakesh kumar

Posted on

how to renders the updated data without refresh in react js

Step 1: in client side data

 {questions 
                  .map((question) => {                   
                    return (
                      <>
                      <tr key={question._id}  >
                        <td cl onClick={handleRedirect}>
                          <span className="main-icon">
                            {/* <Gravatar email={client.email} /> */}
                            {/* {getInitials(client.company_name)} */}
                            <img
                              src="https://secure.gravatar.com/avatar/28859fdf97e611b1434dec99bdb5554d?s=48&d=identicon"
                              alt="logo"
                            />
                          </span>
                          <div className="flexColumn">
                            <span className="textC">{question.question}</span>                           
                          </div>
                        </td>
                        {/* <td className="textC">{client.company_name}</td> */}
                        <td className="textLeft">{question.answer_one}</td>
                        {/* <td className="lowerCase">{client.email}</td> */}
                        <td>{question.answer_two}</td>
                        <td className="textLeft">{question.answer_three}</td>
                        <td> 
                        <label>                        
                    <input
                      type="checkbox"
                      checked={checkedItems.includes(question.questionid)  }                      
                       className={question.permission===1 ? "checkreview" : ""}
                      onChange={() => handleToggleCheckbox(question.questionid)}
                    />          
                         </label>
                      </td>

                        <td>
                          <h4 onClick={(e) => handleAction(e, question._id)}>
                            <BsThreeDots />
                          </h4>
                          {id === question._id && actionOpen ? (
                            <div
                              className="dropdown-menu"
                              aria-labelledby="dropdownMenu2"
                            >

                              <button
                                className="dropdown-item"
                                type="button"
                                onClick={() => editQuestion(question._id)}
                              >
                                <RiFileEditLine />
                                <span className="text"> Edit </span>
                              </button>
                            </div>
                          ) : null}
                        </td>
                      </tr>

                      </>
                    )
                  })

              }
            </tbody>
Enter fullscreen mode Exit fullscreen mode

Image description

step2: click the edit button

Image description

step3: call function inside editQuestion

  const editQuestion = (value) => {
    setActionOpen(false)
    setEditFeedback(value)

    openModal("edit")
  }
Enter fullscreen mode Exit fullscreen mode

step 4: after updating data we call function

Image description

step 5: in appcontext file
Image description

step6: in controller write a query

Image description

step7:in reducer.js

Image description

Image description

some other way

Image description

Image description

Top comments (0)