import React from 'react';
import Form from './Components/Form';
import axios from 'axios';
import List from './Components/List'
class App extends React.Component{
constructor(props){
super(props);
this.state = {
name: '',
comment: '',
registrations: []
}
this.onInputChange = this.onInputChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
this.onDeleteClick = this.onDeleteClick.bind(this);
}
componentDidMount () {
axios.get('/registrations')
.then(response => {
this.setState({
registrations: response.data
})
console.log(response);
})
.catch(error => {
console.log(error);
});
}
onInputChange (event) {
event.preventDefault();
this.setState({
[event.target.name]: event.target.value
})
}
onFormSubmit (event) {
event.preventDefault();
axios.post('/registrations', {
name: this.state.name,
comment: this.state.comment
})
.then(response => {
this.setState({
registrations: response.data
})
})
.catch(error => {
console.log(error);
});
}
onDeleteClick (index) {
axios.delete(`/registrations/${index}`)
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error);
})
}
render(){
return(
<div className='mainApp'>
<Form onInputChange={this.onInputChange}
onFormSubmit={this.onFormSubmit}
name = { this.state.name }
comment = { this.state.comment }
/>
<List
registrations = { this.state.registrations }
onDeleteClick={this.onDeleteClick}
/>
</div>
)
}
}
export default App;
import React from 'react';
import './List.css';
import ListItem from './ListItem';
class List extends React.Component{
constructor(props){
super(props);
// this.state = {
// }
}
render(){
return (
<div className="userInformation">
<table>
<tr>
<th>Name</th>
<th>Comment</th>
<th></th>
</tr>
{this.props.registrations.map((item, index) => {
return <ListItem data={item}
onDeleteClick={this.props.onDeleteClick}
index={index} />
})}
</table>
</div>
)
}
}
export default List;
import React from 'react';
import List from './List';
const ListItem = (props) => {
return (
<tr>
<td>{props.data.name}</td>
<td>{props.data.comment}</td>
<td>
<button className="deleteButton" onClick = {() => {this.props.onDeleteClick(props.index)}}>Delete</button>
</td>
<td>
<button className="editButton">Edit</button>
</td>
</tr>
)
}
export default ListItem;
So list is a child of App, and ListItem is a child of list, what am I missing here?