I am trying to implement something like a Photosharing application in React JS Like Facebook, etc. The application is supposed to get information from a REST api and then populate a Table with feeds from this API https://instagramklone-restapi.herokuapp.com/api/posts/tim_girl_2 for instance. I am getting this Error instead :
TypeError: posts.map is not a function
Now i got confused. I just need help here. It is supposed to get data from the REST api and then populate as feeds for viewing.
My code is looking like this
import './Home.css';
import React, {useState, useEffect} from 'react';
const MyDashBoard = () =>{
const[posts, setPosts] = useState('');
useEffect(() =>{
let userId = localStorage.getItem('userinfo');
fetch('https://instagramklone-restapi.herokuapp.com/api/posts/' userId,
{
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
}).then((response)=> response.json())
.then((responseJson) =>{
setPosts(responseJson.data);
})
},[]);
return (
<div align="center">
<table className="headerTable">
<tr>
<td>
<table border="0" width="100%">
<tr>
<td width="270px">
<p align="right"/></td>
<td width="108px">
<p align="right"/>
<img border="0" src="images/735145cfe0a4.png" width="103px" height="29px"/>
</td>
<td> </td>
<td width="150px">
<p align="center"/>
<input type="image" src="images/home.png" width="27" height="25" align="right" />
</td>
<td width="135">
<p align="center"/>
<input type="image" src="images/logout.png" width="27" height="25" align="left" />
</td>
<td width="128"></td>
</tr>
</table>
</td>
</tr>
</table>
<div className="uploadImagesDiv">
<table className="postsTable">
<tr>
<td height="76">
<p align="left"/>
<textarea rows="4" name="S1" cols="73" className="textArea" />
</td>
</tr>
<tr>
<td height="34">
<p align="left"/>
<input type="file" name="file1" size="73" className="fileUploaderClass"/>
</td>
</tr>
<tr>
<td height="34">
<p align="left"/>
<input type="submit" value="Post" name="submit" className="postButton" />
</td>
</tr>
</table>
</div>
<div className="postsDiv">
{posts.map(post =>(
<table border="0" width="42%" height="600" className="feedsTable">
<tr>
<td height="3">
<p align="left"/> <b>{post.username}</b>
</td>
</tr>
<tr>
<td height="428">
<p align="center"/>
<img border="0" src={post.imgUrl} width="100%" height="100%" className="photoMain" />
</td>
</tr>
<tr>
<td>
<p align="left" /> <b>{post.posts}</b>
</td>
</tr>
</table>
))}
<p align="left"/>
</div>
</div>
);
};
export default MyDashBoard;
What do I do here to get the data from this api https://instagramklone-restapi.herokuapp.com/api/posts/tim_girl_2 for instance.
Edits
Code is Looking like this now :
import './Home.css';
import React, {useState, useEffect} from 'react';
const MyDashBoard = () =>{
const[posts, setPosts] = useState([]);
useEffect(() =>{
let userId = localStorage.getItem('userinfo');
fetch('https://instagramklone-restapi.herokuapp.com/api/posts/' userId,
{
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
}).then((response)=> response.json())
.then((responseJson) =>{
setPosts(responseJson);
})
},[]);
return (
<div align="center">
<table className="headerTable">
<tr>
<td>
<table border="0" width="100%">
<tr>
<td width="270px">
<p align="right"/></td>
<td width="108px">
<p align="right"/>
<img border="0" src="images/735145cfe0a4.png" width="103px" height="29px"/>
</td>
<td> </td>
<td width="150px">
<p align="center"/>
<input type="image" src="images/home.png" width="27" height="25" align="right" />
</td>
<td width="135">
<p align="center"/>
<input type="image" src="images/logout.png" width="27" height="25" align="left" />
</td>
<td width="128"></td>
</tr>
</table>
</td>
</tr>
</table>
<div className="uploadImagesDiv">
<table className="postsTable">
<tr>
<td height="76">
<p align="left"/>
<textarea rows="4" name="S1" cols="73" className="textArea" />
</td>
</tr>
<tr>
<td height="34">
<p align="left"/>
<input type="file" name="file1" size="73" className="fileUploaderClass"/>
</td>
</tr>
<tr>
<td height="34">
<p align="left"/>
<input type="submit" value="Post" name="submit" className="postButton" />
</td>
</tr>
</table>
</div>
<div className="postsDiv">
{posts.map(post =>(
<table border="0" width="42%" height="600" className="feedsTable">
<tr>
<td height="3">
<p align="left"/> <b>{post.username}</b>
</td>
</tr>
<tr>
<td height="428">
<p align="center"/>
<img border="0" src={post.imgUrl} width="100%" height="100%" className="photoMain" />
</td>
</tr>
<tr>
<td>
<p align="left" /> <b>{post.posts}</b>
</td>
</tr>
</table>
))}
<p align="left"/>
</div>
</div>
);
};
export default MyDashBoard;
I still get the same Error
CodePudding user response：
As I can see from your herokuapp api, it returns this:
{
"error": false,
"data": [],
"message": "posts."
}
...so I guess you need the data from it:
setPosts(responseJson.data)
edit: For your better understanding: an object doesn't have a map function.