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

148
Visualizações
Unable to update useState by passing & rendering objects

When I am trying to compile my App.jsx file, it gives the following error-:

Uncaught Error: Objects are not valid as a React child (found: object with keys {present1}). If you meant to render a collection of children, use an array instead.

import React, { useState } from "react";
import Axios from "axios";

function Attendance() {
  const [attedanceList, setAttedanceList] = useState([]);
  const [attendanceMarking, setAttendanceMarking] = useState({});

  Axios.get("http://localhost:9000/attendance").then((response) => {
    setAttedanceList(response.data.data.values);
  });

  function changeValue(event) {
    let { name, value } = event.target;

    setAttendanceMarking((attendanceMarking) => {
      return { ...attendanceMarking, [name]: value }; //error here
    });
    console.log(attendanceMarking);
  }

  function sendAllValues() {
    Axios.post("http://localhost:9000/attendance", { attendanceMarking });
  }

  return (
    <form>
      {attedanceList.map((val, index) => {
        if (index !== 0) {
          let attendance = "attendance" + index;
          let present = "present" + index;
          let absent = "absent" + index;

          return (
            <div key={index}>
              <div>
                {val[0]} {val[1]}
                <input
                  type="radio"
                  id={present}
                  name={attendance}
                  value="1"
                  checked={attendanceMarking === "1"}
                  onChange={changeValue}
                />
                <label for={present}>Present</label>
                <input
                  type="radio"
                  id={absent}
                  name={attendance}
                  value="0"
                  checked={attendanceMarking === "0"}
                  onChange={changeValue}
                />
                <label for={absent}>Absent</label>
              </div>
            </div>
          );
        }
      })}
      <button type="submit" onClick={sendAllValues}>
        Submit
      </button>
    </form>
  );
}

How can I render objects so that I can update the state and avoid errors?

Error screenshot

about 4 years ago · Santiago Gelvez
1 Respostas
Responde à pergunta

0

if val[0] value is React.lazy() or . React.createElement(val[0]) may work normal.

about 4 years ago · Santiago Gelvez Relatório
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