Can't display data in localhost browser - node.js

Question

I creating an app that stores data but when i finish the prompt input i get this error:
Here is my CptList.js
import React, { Component } from 'react';
import { Container, Button } from 'reactstrap';
import uuid from 'uuid';
export default class CpdList extends Component{
state = {}
handleClick = () => {
const date = prompt('Enter Date')
const activity = prompt('Enter Activity')
const hours = prompt('Enter Hours')
const learningStatement = prompt('Enter Learning Statement')
const evidence = prompt('YES! or NO!')
this.setState(state => ({
items: [
...state.items,
{
id: uuid(),
date,
activity,
hours,
learningStatement,
evidence
}
]
}));
}
render() {
const { items } = this.state;
return (
<Container>
<Button
color='dark'
style={{marginBottom: '2rem'}}
onClick={this.handleClick}
>Add Data</Button>
<Button
color='dark'
style={{marginBottom: '2rem'}}
onClick={() => { this.handleClick(items._id) }}
>Delete Data</Button>
</Container>
);
};
};
Can someone please tell me what im doing wrong? I am also having trouble with my delete function, this is my delete coding in my backend:
//Delete a Item
router.delete('/:id', (req, res) => {
Item.findById(req.params.id)
.then(item => item.remove().then(() => res.json({ success: true })))
.catch(err => res.status(404).json({ success: false }));
});

Answer 1

I think you have to initialize state with:
state = { items:[] }
The first time you add item to undefined empty list.
Moreover I think missing a state.items.map somewhere (at least for delete button)

Answer 2

state = [] // convert to array beacuse use map() or other javascipt method
this.setState(state => ({
items: [
// do not speard maybe
{
id: uuid(),
date,
activity,
hours,
learningStatement,
evidence
}
]
}));
plz write handleClick function
tell me working or not