How to get user details of user from randomuser API?

user_14441051 0
Viewed 1192

In a React assignment, I am trying to get the user details from randomuser.me API and show it on another component. Everything is done except unable to get user details from its id

AdminPanel.js

<TableBody>
          {results.map((person) => (

            <TableRow key={person.id.value}>
                <TableCell component="th" scope="row">{person.name.first}</TableCell>
                <TableCell align="right">{person.name.last}</TableCell>
                <TableCell align="center">{person.location.street.name + ',' + person.location.street.number + ',' + person.location.state + ',' + person.location.country  }</TableCell>
                <TableCell align="right"><img src={person.picture.thumbnail} /></TableCell>
                <TableCell align="center">{person.email}</TableCell>
                <TableCell align="right">{person.dob.date}</TableCell>
                <TableCell align="right">
                <Button variant="contained" color="primary" >
                    <Link style={{color:'white'}} to={`/user-detail/${person.login.uuid}`}>View Details</Link>
                </Button>
                </TableCell>
            </TableRow>

          ))}
</TableBody>

After clicking on link it redirects to another page as

UserDetail

import React, {useEffect} from 'react'
import { useParams } from 'react-router-dom';

export const UserDetail = () => {
    const {userid} = useParams()

    useEffect(() => {
        fetch(`/user-detail/${userid}`).then(res=>res.json()).then(result=> {
            console.log(result)
        })

    }, [])
    return (
        <div>
            
        </div>
    )
}

Bu, when console log shows this error 'Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0'

What mistake I'am doing?

enter image description here

reactjs api javascript
3 Answers

Fetch url

fetch (`https://randomuser.me/api/?seed=${seed}`). then (d=>d.json()).then(e=>console.log(e))

Where seed is a string like

const seed ="fea8be3e64777240"
user_137497430

you need to use state for the results

import React, {useState, useEffect} from 'react'
import { useParams } from 'react-router-dom';


export const UserDetail = () => {
    const {userid} = useParams()
    const [result, setResult] = useState([]); 
    useEffect(() => {
        fetch(`/user-detail/${userid}`).then(res=>res.json()).then(result=> {
            console.log(result)
            setResult(result);
        })

    }, [])
    return (
        <div>
            
        </div>
    )
}
user_41593180
user_7536320
Related