Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

89
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda