React: How to access object and display values?

Question

I'm creating a simple blog using React Hooks. So far I successfully get data from database, and I can console log all the data with props.articles. However if I write props.articles.title it says 'undefined'. How can I display title and text of an object which matches with the ID I get from parent component?

The data of blog posts

[
  {
    "id": "1oQAPxRl2k7Spev10qFE",
    "text": "Looooorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr.",
    "title": "Title#1"
  },
  {
    "id": "ThRwQIgpLUB7iBq1H8VI",
    "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.",
    "title": "Title#2"
  },
  {
    "id": "aJvajhmoCXbfU7RJVkzn",
    "text": "Nuncccc sit amet ante convallis, semper metus ut, ornare leo. Fusce tellus metus, commodo at massa non, auctor pharetra ipsum. Maecenas in suscipit nulla. Nam in consectetur dui, non laoreet purus. Aliquam erat volutpat. Etiam non risus vestibulum, ornare mauris ut, pretium mauris. Nam ac rutrum odio. Vestibulum feugiat scelerisque elementum. Sed condimentum risus nec sem sodales porta. Proin mollis suscipit neque, facilisis luctus nisi feugiat nec. Duis efficitur orci vel ullamcorper rhoncus. Fusce ante ipsum, facilisis non purus nec, aliquam fringilla nibh. ",
    "title": "Title#3"
  },
  {
    "id": "pFFNhyrv3aJJg8Cq18Fx",
    "text": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "title": "Title#4"
  }
]

import React from 'react';
import { useParams } from 'react-router';

function Page(props) {
  const { id } = useParams();
  const targetId = id;
  const targetUser = props.articles.find(() => targetId === props.articles.id);
  console.log("targetUser", targetUser) // undefined

    return (
      <div>               

          {console.log("targetUser", targetUser)}  // undefined

      </div>
    );
  }

  export default Page;

import React, { useState, useEffect } from 'react';
import Header from './Header';
import Page from '../pages/Page'
import { db } from "../Firebase";
import {
    BrowserRouter as Router,
    Route,
    Switch
} from 'react-router-dom';

const App = () => {

    const [articles, setArticles] = useState([]);

    useEffect(() => {

        const unsubscribe = db
            .collection('articles')
            .onSnapshot((snapshot) => {
                const newArticles = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()
          }))
          setArticles(newArticles)
        })

          return () => unsubscribe()
    }, []);

    return (
        <div>
            <Router> 
                <Header />
                <Switch>
                    <Route exact path="/" render={() => <Home articles={articles} />} />
                    <Route exact path="/page/:id/" render={() => <Page articles={articles} />} />
                </Switch>
            </Router>     
        </div>
    );
}

export default App;

Shildra · Accepted Answer · 2020-03-07 10:00:45Z

1

sorry. I will change. Please use this code

let targetUser = props.articles.filter(x=>x.id === targetId);
targetUser = targetUser.length > 0 ? targetUser[0] : null;

instead of

  const targetUser = props.articles.find(() => targetId === props.articles.id);

edited Mar 7, 2020 at 10:00

answered Mar 7, 2020 at 9:18

Shildra

1471 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kayak Over a year ago

Sorry, I added parent component's code. That line of code was already there and I could console log the data on Page component.

kayak Over a year ago

Thank you for editing your answer. However if I write {targetUser.title} I still get an error 'undefined' :( console.log(targetUser) works, console.log(targetUser.title) doesn't ...

Shildra Over a year ago

seems targetUser is null. this means, there's no item that has same id as targetId in articles variable. or use == instead of ===

kayak Over a year ago

I'm so sorry, I overlooked '.filter' part. Now it's working! Thank you so much!

random · Accepted Answer · 2020-03-07 10:24:46Z

1

props.articles is an array. So you cannot access the title using props.articles.id.

The props.articles.find will iterate over each object in an array.

const targetUser = props.articles.find((article) => targetId.id === article.id);

Note - You are initially extracting the id property -> const { id } = useParams(); and then assigning it to targetId const targetId = id;. It seems like id is not an object. If this is true, you can access the id value using targetId, instead of targetId.id.

-- Edit --

const targetId = `1oQAPxRl2k7Spev10qFE`;

const props = {
  articles: [
    {
      "id": "1oQAPxRl2k7Spev10qFE",
      "text": "Looooorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr.",
      "title": "Title#1"
    },
    {
      "id": "ThRwQIgpLUB7iBq1H8VI",
      "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.",
      "title": "Title#2"
    },
    {
      "id": "aJvajhmoCXbfU7RJVkzn",
      "text": "Nuncccc sit amet ante convallis, semper metus ut, ornare leo. Fusce tellus metus, commodo at massa non, auctor pharetra ipsum. Maecenas in suscipit nulla. Nam in consectetur dui, non laoreet purus. Aliquam erat volutpat. Etiam non risus vestibulum, ornare mauris ut, pretium mauris. Nam ac rutrum odio. Vestibulum feugiat scelerisque elementum. Sed condimentum risus nec sem sodales porta. Proin mollis suscipit neque, facilisis luctus nisi feugiat nec. Duis efficitur orci vel ullamcorper rhoncus. Fusce ante ipsum, facilisis non purus nec, aliquam fringilla nibh. ",
      "title": "Title#3"
    },
    {
      "id": "pFFNhyrv3aJJg8Cq18Fx",
      "text": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      "title": "Title#4"
    }
  ]
};

const targetUser = props.articles.find((article) => targetId === article.id);

console.log('Target User: ', targetUser);
console.log('Target User title: ', targetUser.title);

edited Mar 7, 2020 at 10:24

answered Mar 7, 2020 at 9:11

random

7,9093 gold badges21 silver badges25 bronze badges

4 Comments

kayak Over a year ago

I fixed the code but then it turned to 'undefined'. Also I don't know how to display title and text by using this line of code const targetUser = props.articles.find((article) => targetId.id === article.id); ...

random Over a year ago

@kayak - targetUser will return found object, you can access the title and text using dot operator. i:e targetUser.title and targetUser.text. What do you get in targetUser?

kayak Over a year ago

const targetUser = props.articles.find((el) => id === el.id); <- This gave me an object. ``` {console.log("targetUser", targetUser)} ``` <- This code (in return () part) gave me the same object as the first one. But if I change it to ``` {console.log("targetUser", targetUser.title)} ``` the code breaks and the error says "TypeError: targetUser is undefined" ...

kayak Over a year ago

Thank you for editing your answer. Unfortunately, I cannot change the array (object) since they're the data from database, which I cannot easily change like const props = { articles: [ But thank you so much!

Collectives™ on Stack Overflow

React: How to access object and display values?

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related