Question 73394 in Reactjs Question posted in
The new location for the React Documentation can be found here.

ReactJS – Trying to access the title of an object I'm pulling from a webpage online, but getting these errors

I’m trying to create a news website with ReactJS and I’m getting three various warnings/errors when I try to run the page. I can get it to display the article link properly when I don’t include the title. I still get the two first warnings in this case, but when I try to access the article’s title it won’t load the page at all.

Any help is greatly appreciated.

The warnings/errors:

Warning: Each child in a list should have a unique "key" prop.

Warning: Invalid value for prop href on tag.

Uncaught Error: Objects are not valid as a React child (found: object with keys {rendered}). If you meant to render a collection of children, use an array instead.

LatestArticles.js

import React, { useState, useEffect } from "react";
import Article from "./Article";

function LatestArticles() {
  const [posts, setPosts] = useState(React.useState("waiting..."));

  function ArticleGrabber() {
    useEffect(() => {
      fetch("URL")
        .then((response) => response.json())
        .then((data) => {
          setPosts(data);
          console.log(data);
        })
        .catch((error) =>
          console.log("Authorization failed: " + error.message)
        );
    }, []);
  }

  ArticleGrabber();

  return (
    <div>
      <h3>Latest Articles</h3>
      {posts.map((post, index) => (
        <ul>
          <Article key={index} post={post} />
        </ul>
      ))}
    </div>
  );
}

export default LatestArticles;

Article.js

import React from "react";
import "../Article.css";

function Article(post) {
  return (
    <div className="theArticle">
      <h3>{post.post.title.rendered}</h3>
      <a href={post.post.link}>Article content</a>
    </div>
  );
}

export default Article;
Tags:

2

Answers


  1. 0

    As far as I can see I see two Issues. 1. State inside an Inside, and the UseEffect Hook. Try this:

     const [waiting, setWaiting] = useState("waiting...")
 const [posts, setPosts] = useState([]));

    useEffect(() => {
     const articleGrabber = () => {
             fetch("URL")
        .then((response) => response.json())
        .then((data) => {
          setPosts(data);
          console.log(data);
        })
        .catch((error) =>
          console.log("Authorization failed: " + error.message)
        );
     }
    articleGrabber() 
    }, []);
    Login or Signup to reply.
  2. 0

    Warning: Each child in a list should have a unique "key" prop.

    • when adding keys you need to add it to the parent element of the item (in this case the ul tag).

    Warning: Invalid value for prop href on tag.

    Uncaught Error: Objects are not valid as a React child (found: object with keys {rendered}). If you meant to render a collection of children, use an array instead.

    For these two errors, it might be due to how you are fetching your data, but there are a few things I would look into first:

    1. You are using react hooks within a React hook (useState and React.useState), instead make the default an empty array.
     const [posts, setPosts] = useState([]));
    1. Take your useEffect out of your function since it only runs when there are side effects… I would remove your function altogether and just stick to rendering your posts through the useEffect and that should work.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search