How I can make it so that what is entered in the form is only the initial state of a new row added. And then when the user goes into the cells of the table below, whatever he types into the cell will update the state. Now the way its working if you want to update a row you need to go into the form on the top make your changes and then click the update button on the row you want to update, but this is not the desired behavior. I want the user to make his updates directly into the cells and not need to touch the form on top (only deal with the form on top if he wants to add a new row). I dont care about needing to refresh the page to see changes or the other errors in the console at the moment.
import React from 'react';
import { db } from '../firebase';
class AddunitForm extends React.Component {
constructor(props) {
super(props);
this.state = {
nameInput: '',
sizeInput: '',
priceInput: '',
submit: '',
units: [
]
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.onDelete = this.onDelete.bind(this)
}
componentDidMount() {
db.collection('locations').get().then((snapshot) => {
var newUnits = snapshot.docs.map(item => ({
id: item.id,
data: item.data()
}));
this.setState({ units: newUnits })
});
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
handleSubmit(event) {
event.preventDefault()
let data = { name: this.state.nameInput, size: this.state.sizeInput, price: this.state.priceInput }
if(!data.name.trim()||!data.size.trim()||!data.price.trim()){
window.alert('one or more empty fields, fields cannot be blank')
} else {
db.collection('locations').add(data).then((snapshot) => {
let id = snapshot.id;
this.setState(prevState => ({
units: prevState.units.concat({ data: data, id: id })
}));
})
}
}
onDelete = (id) => {
db.collection('locations').doc(id).delete().then(() => {
this.setState({
units: this.state.units.filter((unit) => unit.id !== id)
});
})
}
onUpdate = (id) => {
db.collection('locations').doc(id).set({name:this.state.nameInput, size: this.state.sizeInput, price: this.state.priceInput })
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
Name:
<input value={this.state.nameInput} onChange={(e) => { this.setState({ nameInput: e.target.value }) }} />
<br/>
Size:
<input value={this.state.sizeInput} onChange={(e) => { this.setState({ sizeInput: e.target.value }) }} />
<br/>
Price:
<input value={this.state.priceInput} onChange={(e) => { this.setState({ priceInput: e.target.value }) }} />
<br/>
<button type='submit'>Submit!</button>
</form>
<table>
<thead>
<tr>
<td>Name</td>
<td>Size Sqft</td>
<td>Price $</td>
</tr>
</thead>
<tbody>
{/* For every unit in this.state.units */}
{this.state.units.map((unit) => {
return (
<tr key={unit.id}>
<td ><input defaultValue={unit.data.name} /></td>
<td ><input defaultValue={unit.data.size}/></td>
<td ><input defaultValue={unit.data.price}/></td>
<button onClick={() => this.onDelete(unit.id)}>Delete</button>
<button onClick={() => this.onUpdate(unit.id)}>Update</button>
</tr>
)
})}
</tbody>
</table>
</div>
);
}
};
export default AddunitForm;