-1

i have this component in react

export default function CambiosEnArchivo() {
  const [response ,setResponse]= useState([]);

  useEffect(() => {
    axios
      .get(url + "/datosarchivotexto")
      .then((data) => {
        setResponse(data)
      })
      .catch((error) => {
        console.log(error.message);
      },[]);
  });

  return (
    <div>
      <table className="table ">
            <thead>
              <tr>
                <th>Nombres</th>
                <th>Valor1</th>
                <th>Valor2</th>
                <th>Valor3</th>
              </tr>
            </thead>
            <tbody>
              {response.map((dato) => {
                 return <tr><td>{dato.Nombre}</td><td>{dato.Valor1}</td><td>{dato.Valor2}</td><td>{dato.Valor3}</td></tr>
              })}
            </tbody>
          </table>
    </div>
  );
}

I'm trying to fetch data from an api an render it in a table

Page is not rendering as this error follows up: enter image description here

the api is returning this

enter image description here

Juan Castillo
  • 103
  • 2
  • 9
  • 1
    `.then((data) => ` should probably be `.then(({data}) => `. See axios docs for how to use this library. You must make sure that you don't set `response` state variable to something that is not an Array. – Håken Lid May 27 '22 at 15:50
  • Does this answer your question? [React .map() is not a function error](https://stackoverflow.com/questions/42989716/react-map-is-not-a-function-error) – Håken Lid May 27 '22 at 15:55

1 Answers1

0

try this way :

useEffect(() => {
    axios
      .get(url + "/datosarchivotexto")
      .then((res) => {
        setResponse(res.data)
      })
      .catch((error) => {
        console.log(error.message);
      },[]);
Randall H
  • 64
  • 5