Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

90
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda