react fetch data on button click

Question

I'm trying to fetch data in react. The problem is i have to click on button twice to get that data. Although i don't get data on first click it somehow renders if I add JSON.stringify to it. If I don't add JSON.stringify it returns undefined. If anyone know what this is please help me

without clicking
on first click
on second click

import React, {useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios'

function Example() {

const [students,setStudents] = useState('')
const [name,setName] = useState('')

const handleClick = async() => {
    const data = await axios.get('api/foo')
    setStudents(data)
    console.log(students)
}

return (
    <div className="container">
        <h2>Example component</h2>
        <button onClick = {handleClick}>Get students</button>
        <div>
            {JSON.stringify(students.data)}
        </div>
    </div>
);
 }

export default Example;

if (document.getElementById('root')) {
     ReactDOM.render(<Example />, document.getElementById('root'));
 }

Artsiom Aliaksandrau · Accepted Answer · 2020-11-02 15:36:02Z

2

The problem was that setStudents is an asynchronous function, so I just made student object and added to it loading property

const [students,setStudents] = useState({
    data: '',
    loading: true
})
const [name,setName] = useState('')

const handleClick = async() => {
    const data = await axios.get('api/foo')
    setStudents({
        data: data,
        loading: false
    })
}

return (
    <div className="container">
        <h2>Example component</h2>
        <button onClick = {handleClick}>Get students</button>
        <div>
            {students.loading?'':
            students.data.data[0].name}
        </div>
    </div>
);

}

answered Nov 2, 2020 at 15:36

Artsiom Aliaksandrau

691 gold badge1 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ala Eddine Menai Over a year ago

I guess the loading should be false then become true , right?

Rudraprasad Das · Accepted Answer · 2020-11-02 15:15:18Z

1

setStudent is an asynchronous function. This means the value of students won't change immediately after you call setStudents.

Try shifting the console.log outside the handleClick function. Like this -

import React, {useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios'

function Example() {

const [students,setStudents] = useState('')
const [name,setName] = useState('')

const handleClick = async() => {
    const data = await axios.get('api/foo')
    setStudents(data)
}

console.log(students)

return (
    <div className="container">
        <h2>Example component</h2>
        <button onClick = {handleClick}>Get students</button>
        <div>
            {JSON.stringify(students.data)}
        </div>
    </div>
);
 }

export default Example;

if (document.getElementById('root')) {
     ReactDOM.render(<Example />, document.getElementById('root'));
 }

Initially, the value will be an empty string, then it will change to the value from api/foo

answered Nov 2, 2020 at 15:15

Rudraprasad Das

3782 silver badges10 bronze badges

1 Comment

Artsiom Aliaksandrau Over a year ago

Thank you, but the problem is when i try to render students.data in jsx without JSON.stringify it returns error that students.data is undefined. Do I need to use UseEffect hook ?

Shmili Breuer · Accepted Answer · 2020-11-02 15:13:51Z

0

React hooks are async so when you are running console.log(students) right after running setStudents(data) it is still not populated, however the 2nd time you click the button it is already populated from the first time you clicked it.

If you want to console the result right after the state setter runs you can see this answer on another question.

answered Nov 2, 2020 at 15:13

Shmili Breuer

4,1652 gold badges21 silver badges28 bronze badges

Comments

Marwen khamassi · Accepted Answer · 2024-03-08 17:53:20Z

0

import { useState } from "react"

function App() {
  const [data, setData] = useState(null)
  const [error, setError] = useState(null)
  const [loading, setLoading] = useState(false)

  function fetchHanlde() {
    const url = 'https://jsonplaceholder.typicode.com/posts'
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false)
      })
      .catch((error) => {
        setError(error)
        setLoading(false)
      })
      .finally(() => setLoading(false))

    return { data, loading, error }
  }

  return <>
    <h1>hook pesonnalisé  </h1>
    <button onClick={fetchHanlde}>get posts</button>

    {loading && <div>Loading...</div>}
    {data && <div>
      <ul>
        {data.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>}
    {error && <div>error  : {error.message}</div>}
  </>
}


export default App

answered Mar 8, 2024 at 17:53

Marwen khamassi

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

react fetch data on button click

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related