Updating Table in React - reactjs

Question

Seen a few questions but still not sure what to do. New to react as well. I want to update a table with the values of Title and Amount using input fields. I am pretty sure I have to set the state to a blank table and then update the state when it is updated. How do I update the table with a new row each time the 2 new values are added?
import React, { Component } from 'react';
import './App.css';
const table =
<table id="itemTable">
<tbody>
<tr><th>Title</th>
<th>Amount</th>
<th>Remove Item</th>
</tr>
</tbody>
</table>;
class App extends Component {
constructor(props){
super(props);
this.state = {
title: '',
amount: '',
table: {table}
};
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
//adds to table
}
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
render() {
return (
<section className="App">
<header>
<h1>Money Manager</h1>
</header>
<section>
<h1>Finances</h1>
<form>
<label htmlFor="name">Name</label>
<input type="text" name="title" onChange={this.handleChange}/>
<label htmlFor="amount">Amount</label>
<input type="text" name="amount" onChange={this.handleChange}/>
<button type="button" id="add" onClick={this.handleClick}>Add item</button>
</form>
<section>
<h1>Items</h1>
{table}
</section>
</section>
</section>
);
}
}
export default App

Answer 1

You should make the front of the table, and make a state for the content of the table, like this:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props){
super(props);
this.state = {
tableContent: []
};
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// Don't forget to check if the inputs are corrects
// Here i generate a random number for the key propriety that react need
let randomID = Math.floor(Math.random() * 999999);
// recreate a new object and stock the new line in
let newTab = this.state.tableContent;
newTab.push({
key: randomID,
title: "",
amount: "" // Don't forget to get the value of the inputs here
});
this.setState({
tableContent: newTab
});
// Clear the content of the inputs
// the state has changed, so the tab is updated.
}
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
render() {
return (
<section className="App">
<header>
<h1>Money Manager</h1>
</header>
<section>
<h1>Finances</h1>
<form>
<label htmlFor="name">Name</label>
<input type="text" name="title" onChange={this.handleChange}/>
<label htmlFor="amount">Amount</label>
<input type="text" name="amount" onChange={this.handleChange}/>
<button type="button" id="add" onClick={this.handleClick}>Add item</button>
</form>
<section>
<h1>Items</h1>
<table id="itemTable">
<thead>
<tr>
<th>Title</th>
<th>Amount</th>
<th>Remove Item</th>
</tr>
</thead>
<tbody>
{this.state.tableContent.map((item) =>
<tr key={item.key}>
<td>{item.title}</td>
<td>{item.amount}</td>
<td>
{/* Here add the onClick for the action "remove it" on the span */}
<span>Remove it</span>
</td>
<td></td>
</tr>
)}
</tbody>
</table>
</section>
</section>
</section>
);
}
}
export default App
It's not finished but i've commented what you should do and what i've done.