Not understanding why im getting a TypeError: Cannot read property '_id' of undefined in React - node.js

Question

I'm trying to figure out why my code isn't working but I'm still not understanding why I'm getting this type error.
import React, { Component } from 'react';
import axios from 'axios'
class List extends Component {
state = {
title: '',
description: ''
}
componentDidMount(){
const initialState = {
_id: this.props.list._id,
title: this.props.list.title,
description: this.props.list.description
}
this.setState(initialState)
}
handleChange = (event) => {
const { value, name } = event.target
this.setState({[name]: value})
}
handleDelete = () => {
axios.delete(`/api/lists/${this.state._id}`).then(() => {
this.props.getAllLists()
})
}
handleUpdate = () => {
axios.patch(`/api/lists/${this.state._id}`, this.state).then(() => {
console.log("Updated List")
})
}
render() {
return (
<div>
<input onBlur={this.handleUpdate}
onChange={this.handleChange}
type="text" name="title"
value={this.state.title}
/>
<textarea onBlur={this.handleUpdate}
onChange={this.handleChange}
name="description" value={this.state.description}
/>
<button onClick={this.handleDelete}>X</button>
</div>
)
}
}
export default List
This is the Error msg at this link
Added the other part
import React, { Component } from 'react';
import axios from 'axios'
import List from './List';
class ListPage extends Component {
state = {
user: {},
lists: []
}
componentDidMount() {
this.getAllLists()
}
getAllLists = () => {
// make an api call to get one single user
// On the server URL is '/api/users/:userId'
const userId = this.props.match.params.userId
axios.get(`/api/users/${userId}`).then(res => {
this.setState({
user: res.data,
lists: res.data.lists
})
})
}
handleCreateNewList = () => {
const userId = this.props.match.params.userId
const payload = {
title: 'List Title',
description: 'List Description'
}
axios.post(`/api/users/${userId}/lists`, payload).then(res => {
const newList = res.data
const newStateLists = [...this.state.lists, newList]
this.setState({ lists: newStateLists })
})
}
render() {
return (
<div>
<h1>{this.state.user.username}'s List Page</h1>
onClick={this.handleCreateNewList}
New Idea
{this.state.lists.map(list => (
<List getAllLists={this.getAllLists} key={list._id} list={list}/>
))}
</div>
)
}
}
export default ListPage;

Answer 1

Sorry I can't comment yet. The error is because no 'list' prop is being passed to the component. Are you using the component like this:
<List list={{_id: 'someId', title: 'someTitle', description: 'someDesc'}} />
Also, why are you overwriting the state when the component mounts instead of setting the initial state?

Answer 2

I think you should first check if "this.state.lists" is empty or not, before passing the props.