Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

88
Views
Force rerender parent component when done with update data

I have data stored in an array of objects that will be sent through axios PUT. After done with updating data, I want the page to rerender so that it display the current data after update.

Parent component:-

<tbody>
  {appSettingsList.map((appSettings, i) => (
   <EditButton appSettings={appSettings} i={i} />
   ))}
</tbody>

first child component:-

const [showEdit, setShowEdit] = useState(false);
return (
<tr key={i}>
  <td>{appSettings.appid}</td>
  <td>{appSettings.Name}</td>
  <td>{appSettings.BackgroundColor}</td>
  <td>{appSettings.FontSize}</td>
  <td>{appSettings.FontFamily}</td>
  <td>{appSettings.Theme}</td>
  <td>{appSettings.NavigationBar}</td>
  <td className="action-column">
    {showEdit ? (
      <EditApplicationSettings
        appSettings={appSettings}
        changeState={(showEdit) => setShowEdit(showEdit)}
      />
    ) : (
      <button
        key={i}
        className="button-green"
        onClick={() => setShowEdit(!showEdit)}
      >
        Edit
      </button>
    )}
  </td>
</tr>

Second child component (this is where the update occurs)

const [newValue, setNewValue] = useState([]);
  const [attributeId, setAttributeId] = useState([]);
  let attributes = {
    appid: [],
    attributeid: [],
    newvalue: [],
    datemodified: [],
  };

function submitUpdate(e) {
e.preventDefault();
for (var i = 0; i < newValue.length; i++) {
  attributes.appid = appSettings.appid;
  attributes.attributeid = attributeId[i];
  attributes.newvalue = newValue[i];
  attributes.datemodified = GetCurrentLocalDateTime();
  axios
    .put(
      `http://localhost:8080/application-settings/${appSettings.appid}`,
      {
        attributes,
      }
    )
    .catch((error) =>
      console.log(
        "Failed to update employment type data",
        error.response.data
      )
    );
}
Swal.fire({
   icon: "success",
   title: "Successfully Updated!",
   showConfirmButton: false,
   timer: 1500,
});
props.changeState(false);

How to make the component rerender without having to force refresh on the whole page?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!