React - Trying to render property of object, though it stays “undefined”

console.log(detailtext) shows me that the data of the object is there, the props seem to work, but I can't display the properties of the object.
Why?

console.log(detailtext)

It's a very simple component:

import React from "react";
import { Link } from "react-router-dom";

class LibraryTextDetails extends React.Component {
render() {
const detailtext = this.props.detailview || {};
console.log("THIS IS THE DETAILTEXT");
console.log(detailtext);
const detailviewIds = detailtext.id;
console.log("THIS IS THE DETAILVIEW ID");
console.log(detailviewIds);

return (
<div>
<div className="covercard">
<img
src={detailtext.lead_image_url}
width={157}
className="coverdetailimage"
/>
</div>
<div className="titledetailcard">{detailtext.title}</div>
<div className="authordetailcard">{detailtext.author}</div>
</div>
);
}
}

export default LibraryTextDetails;


Here is the console.log:

console.log

3 Answers
3

You are passing in an array as detailview to your component. The data you see in your console is the data of the first object in the array. Make sure you render detailview[0], and it will work.

detailview

detailview[0]

Example

class LibraryTextDetails extends React.Component {
render() {
const { detailview } = this.props;
const detailtext = (detailview && detailview[0]) || {};

return (
<div>
<div className="covercard">
<img
src={detailtext.lead_image_url}
width={157}
className="coverdetailimage"
/>
<div className="titledetailcard">{detailtext.title}</div>
<div className="authordetailcard">{detailtext.author}</div>
</div>
</div>
);
}
}


I would say, given that detailtext is an array you'd need to replace

const detailviewIds = detailtext.id;


by

const detailviewIds = detailtext[0].id;


...but I don't see the id in your screenshot. Is it an existing property?

const detailviewIds = detailtext[0].id;

Uncaught TypeError: Cannot read property 'id' of undefined at t.value

you are missing important thing

detailtext is array of objects

detailtext

when you see in log [{ ... }] it means it's Array with one object

log [{ ... }]

log also displays first object in array below

log

so correct use would be

detailtext[0].lead_image_url
detailtext[0].title


and similar or use proxy variable
or fix the way you send data to this component not to be array but just an object (first in array)

const detailviewIds = detailtext[0].id;

index_bundle.js:1 Uncaught TypeError: Cannot read property 'id' of undefined at t.value

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.