I am trying to print the value of props in my JSX,even though the logs show the object when i try to print individual objects it throws error TypeError: Cannot read property <'objects'> of undefined
i am using REDUX, i tried looping using map, forEach etc. still i am getting the error. console.log("props.stories") shows the objects but when i try to log individual objects the "props.stories" becomes "undefined"
import React from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
const ShowStory = (props) => {
console.log(props.stories) // shows objects
console.log(props.stories._id) // gives error and above log becomes undefined
return(
<div>
<h1>{props.stories.bookTitle}</h1>
</div>
)
}
const mapStateToProps = (state, props) => {
const id = props.match.params.id
var arr1d = [].concat(...state.stories)
return {
stories: arr1d.find(story => story._id == id),
}
}
export default connect(mapStateToProps)(ShowStory)
If stories
is an array of objects, you need to access it using .map
function like this.
Remove this line to get rid of console error:
console.log(props.stories._id) // gives error and above log becomes undefined
If you want to print all stories' bookTitle then:
<ul>
{props.stories.map((story, index) => (
<li key={index}>{story.bookTitle}</li>
))}
</ul>
If you want to print first story's bookTitle then:
<div>
<h1>{props.stories[0].bookTitle}</h1>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.