Updating Table in React

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.