• Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

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

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

9 months ago · Juan Pablo Isaza Report

0

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>
             </>

        )
     }
9 months ago · Juan Pablo Isaza Report

0

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>) 
          }
        </>

        )
}

9 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.