I am new at React and trying to learn it. I am getting data from API and I will use the data.It just returns array list data. Please help me to solve this problem, The log says it's coming from the users.map loop in the JSX. I want to display the data on the user const and become an array list
const Item = ({user_id, title, body}) => {
return (
<View style={styles.container}>
<Text style={styles.text}>User Id :{user_id}
</Text>
<Text style={styles.text}>Tittle :{title}
</Text>
<Text style={styles.text}>Body :{body}
</Text>
<View style={styles.line}></View>
</View>
)
}
const Berita = () => {
const [users,
setUsers] = useState([]);
useEffect(() => {
getData();
}, []);
const getData = () => {
axios
.get('https://gorest.co.in/public/v1/posts')
.then(res => {
console.log('res: ', res);
setUsers(res.data);
})
}
return (
<View style={styles.container}>
{users.map(user => {
return <Item
key={user.id}
user_id={user.user_id}
title={user.title}
body={user.body}/>
})}
</View>
)
}
export default Berita
thank for your time
Your issue is that res.data isn't what you think it is. It is actually an object and not an array, so when trying to use .map() on an object, you get an error as .map() isn't a method defined for that function.
When using axios.get(), you get back a Promise that resolves to a response object which has the following shape:
The response for a request contains the following information.
{ // `data` is the response that was provided by the server data: {}, // `status` is the HTTP status code from the server response status: 200, // `statusText` is the HTTP status message from the server response statusText: 'OK', // `headers` the HTTP headers that the server responded with // All header names are lower cased and can be accessed using the bracket notation. // Example: `response.headers['content-type']` headers: {}, // `config` is the config that was provided to `axios` for the request config: {}, // `request` is the request that generated this response // It is the last ClientRequest instance in node.js (in redirects) // and an XMLHttpRequest instance in the browser request: {} }
In your example, the res in .then(res => is an object of this structure, and it is the data property of this response object that holds the body/data that your API responds with. In your example, the above object's data property holds:
{
"meta": {
/* ... properties ... */
},
"data": [/* user objects */ {...}, {...}, ...]
}
So, to correctly access your array of user objects from the object object, you first need to access res.data which gives you access to the above object, and then .data (by using res.data.data) to get access to the array of user objects from the object:
const getData = () => {
axios
.get('https://gorest.co.in/public/v1/posts')
.then(res => {
setUsers(res.data.data);
});
}