didinj/mern-stack-crud

Unable to access object property in react render()

satvim opened this issue · 1 comments

Hi,

I am using a similar template for my employee CRUD application. Below is my code in Show.js

componentDidMount() {
//console.log("Id in ShowJS" + this.props.match.params.id);
axios.get('/employees/'+ this.props.match.params.id)
.then(res => {
this.setState({ employee: res.data });
console.log(this.state.employee[0].salary);
});
}
//The salary property is printed fine here.

below is the render code:
return (
div class="panel-heading">

{this.state.employee[0].salary}

)

//Unable to access salary property here
Getting below error
Objects are not valid as a React child (found: object with keys {id, name, designation, dob, salary}).

Any help please?

Try to remove [0], so it will look like this.state.employee.salary