Question

0

84

Views

Error on fetch data, function instead of value

Hi guys I am trying to fetch data using get, and I want the data to be displayed after I click on the button, as a normal crud I am new in programming if there is someone that can help me. I APPRECIATE THANKS everything in my backend is ok, I try in postman and console.log is everything good. My problem is only in this part thanks


import { useState, useEffect } from "react";
import axios from "axios";



 function Usuarios() {
    const [users, setUsers] = useState([]);

     useEffect(()=> {
        const todosUsers = async () => {
            const res= await axios.get("/users");
            console.log(res)
            setUsers(res.data);
        }
        todosUsers()
    },[])
 
    return (
        <>
        <button onClick=
        {users.map((users) => ( 
            <h1>{users.username}</h1>
            ))}></button>
        </>

        )
}

export default Usuarios;

9 months ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T07:59:58.816Z

one solution would be to keep a seperate variable to see if button is clicked as S.Singh mentioned

  const [users, setUsers] = useState([]);
  const [clicked, setClicked] = useState(false);

and in your component you can set the clicked variable to true on click

 return (
        <>
        <button onClick={() => setClicked(true)}></button> //setting clicked true onclick
        {clicked && users.map((users) => (  //only renders when click is true
            <h1>{users.username}</h1>
         ))}
        </>

        )

if you want to hide and show alternatively on click just change the line to onClick={() => setClicked(!clicked)}

codesandbox demo

Answer 2 · 2022-07-04T07:59:58.823Z

Move

 {users.map((users) => ( 
        <h1>{users.username}</h1>
        ))
 }

from onClick definition and place it in an a markup where you want it to render. Define onClick hendler, which will be setting data from an API to a state

 import { useState, useEffect } from "react";
 import axios from "axios";

  function Usuarios() {
      const [users, setUsers] = useState([]);

      const fetchOnClick = async () => {
          await axios.get("/users");
          console.log(res)
          setUsers(res.data);
      }

      return (
          <>
              <button onClick={fetchOnClick}>
                  Fetch
              </button>
              <div>
                  {users.map((users) => ( 
                      <h1>{users.username}</h1>
                  ))}
              </div>
         </>

    )
 }

OR

If you want to fetch the data inside useEffect hook, like you did in your example

 import React, { useState, useEffect } from "react";

     function Usuarios() {
         const [users, setUsers] = useState([]);
         const [isContainerShowed, setIsContainerShowed] = useState(false)

         useEffect(() => {
             const res= await axios.get("/users");
             console.log(res)
             setUsers(res.data);
         }, [])

         const displayContainer = () => setIsContainerShowed(true);

         return (
             <>
                 <button onClick={displayContainer}>
                     Fetch
                 </button>
                 <div style={{display: isContainerShowed ? "block" : "none"}}>
                     {users.map(users => <h1>{users.username}</h1>)}
                 </div>
             </>

        )
     }

Answer 3 · 2022-07-04T07:59:58.830Z

use Effect hook runs every time the component is rendered but as I understand, you want to display users when the button is clicked, so you can fetch users once the button is clicked and display them using the code below

import { useState, useEffect } from "react";
import axios from "axios";

 function Usuarios() {
    const [users, setUsers] = useState([]);

    
    const fetchUsers= async () => {
            const res= await axios.get("/users");
            setUsers(res.data);
    }
 
    return (
        <>
          <button onClick={() => fetchUsers()}></button>
          {
             users.length && users.map(user => <h2>{user.username}</h2>) 
          }
        </>

        )
}