React, map with 2 json without id

Question

I would like some help: I have two Json: posts and Author. Json posts have no id. Ojson returns right in the log. I already have the card component created, but I can’t render the posts on the screen. Each post has a respective author. Grateful

Jsons : Publications: http://www.mocky.io/v2/5be5e3fa2f000082000fc3f8 Authors: http://www.mocky.io/v2/5be5e3ae2f00005b000fc3f6

App.js:

import Routes from './routes';
import api from '../src/services/api';

import Navbar from '../src/components/Navbar';
import PostCard from '../src/components/PostCard';

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function loadPosts() {
      const response = await api.get('5be5e3fa2f000082000fc3f8')
      const { postsApi } = await response.data

      console.log(response.data);

      setPosts(postsApi);
    }
    loadPosts();
  }, []);

  return (
    <>
    <div id="App">
      <Navbar></Navbar>
      <section className="cards">
        {posts?.map((post, index) => (
          <div key={index}>
            <PostCard post={post} ></PostCard>
          </div>
        ))}
      </section>
    </div>
    </>
  );
}

export default App; ```

Answer 1

Analyzing your code better I realized that the error is on the line const { postsApi } = await response.data

Problems:

console.log

You say that the console.log returns the correct JSON, but you call console.log(response.data) and not console.log(postsApi), which is where you are storing the desired data. Consequently, you don’t know if the variable postsApi is with the correct data.

await response.data

That doesn’t make sense. You used await in the api.get, which is asynchronous, does not need to use await to read an object attribute.

const { postsApi } = await response.data

Finally (and the root of your question), by removing the await, we have const { postsApi } = response.data. That’s the same as const postsApi = response.data.postsApi, Can you see the error now? The object response.data does not have an attribute postsApi.

Solution

As stated in the previous paragraph, you just need to fix how to store the data obtained from the api. If you don’t understand how your previous code works, read on Allocation via de-structuring.

const postsApi = response.data