How to print json api data in reactjs

Question

I'm fetching json api details through GET request and trying to print it. Getting an error:

Error in the console is Uncaught ReferenceError: allUsers is not defined

    const Dashboard = ({status, juser}) => {
const [allUsers, setAllUsers] = React.useState([]);
const id = juser.actable_id;
console.log(id); //getting id here as 1
const getAllusers = () => {
    axios
        .get(`http://localhost:3001/user/${id}`, { withCredentials: true })
        .then((response) => {
           console.log(response.data);
            setAllUsers(response.data);
        })
        .catch((error) => {
            console.log(" error", error);
        });
};

  React.useEffect(() => {
    getAllusers();
  }, []);

{allUsers.map((job_seeker, index) => {
    return (
        <div>
            <p>{job_seeker.name}</p>
        </div>
    );
})}
}

export default Dashboard;

I'm new to react. Any help is appreciatable.

I think you really need to read this carefully. Your setter function is allUsers and you're trying to use it as a variable. — need_to_know_now
– need_to_know_now, Commented Mar 28, 2021 at 12:51

Mohiuddin Khan · Accepted Answer · 2021-03-28 13:03:10Z

1

const [state, setState] = React.useState([]);

the state is where your data is located and setState is function to reset the state from anywhere,

so on your code,

const [jobseekers, allUsers] = React.useState([]); // change string to array

jobseekers is the variable where your data is located and allUsers is the function to store data into state.

set data to state using allUsers function,

const getAllusers = () => {
    axios
        .get(`http://localhost:3001/user/${id}`, { withCredentials: true })
        .then((response) => {
            allUsers(response.data);
        })
        .catch((error) => {
            console.log(" error", error);
        });
};

and map from jobseekers

{jobseekers.map((job_seeker, index) => {
    return (
        <div>
            <p>{job_seeker.name}</p>
        </div>
    );
})}

Also I would suggest to rename your state and setState as,

const [allUsers, setAllUsers] = React.useState([]);

edited Mar 28, 2021 at 13:03

answered Mar 28, 2021 at 12:56

Mohiuddin Khan

5331 gold badge5 silver badges13 bronze badges

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

4 Comments

SkRoR Over a year ago

Thank you @Mohiuddin Khan, but have a error like this "Duplicate declaration "allUsers" " afer adding this const [allUsers, setAllUsers] = React.useState([]);

need_to_know_now Over a year ago

You have to remove the initial hook you used const [jobseekers, allUsers] = React.useState('')

SkRoR Over a year ago

@Mohiuddin Khan thanks a lot for helping me. great thanks for sharing some readings related to this. i. updated my anwer based on your corrections.

Mohiuddin Khan Over a year ago

@SreRoR glad I could help :)

alisasani · Accepted Answer · 2021-03-28 12:58:23Z

1

You didn't pass the value of response to allUsers, instead, you just created a new variable. So change

   const allUsers = response.data;

to:

   allUsers(response.data)

Besides, you can also improve the way that you have used useState. You have initialized it as an empty string while you'll probably store an array from response in jobseekers. So, initialize it as an empty array.

const [jobseekers, allUsers] = React.useState([]);

edited Mar 28, 2021 at 12:58

answered Mar 28, 2021 at 12:52

alisasani

3,1311 gold badge10 silver badges19 bronze badges

1 Comment

SkRoR Over a year ago

Thank you for your great help. Kindly forgive @ali sasani accepting above answer . He replied first. Don't think bad. even you also answered the same and correct one

Collectives™ on Stack Overflow

How to print json api data in reactjs

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related