ReactJS: Editing list of JSON objects

Kind of like the TODO list, but the entry is a JSON object

My previous post about a simple TODO list is exactly for an array of strings. So what if we want to update a list of objects. I tried out with this simple experiment:

const headers = ['name', 'description']
class Root extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      name: 'ReactJS: Create JSON array',
      objects: [
        {name:'AngularJS',description:'Superheroic JavaScript MVW Framework'},
        {name:'React',description:'A JavaScript Library for Building User Interfaces'},
        {name:'Vue.js',description:'The Progressive JavaScript Framework'}
      ]
    }
    this.handleClick = this.handleClick.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  handleClick(event){
    eval(this[event.target.name]).bind(this)(event)
  }
  handleSubmit(event){
    event.preventDefault()
  }
  addRow() {
    if (!this.state.obj) return
    const objects = this.state.objects||[]
    objects.push(this.state.obj)
    this.setState({objects:objects, obj:null})
  }
  render(){
    return (
      <div className="container">
        <h3>
          {this.state.name}
        </h3>
        <form name="addRow" onSubmit={this.handleSubmit}>
          <table className="table table-striped table-bordered">
            <thead className="thead-inverse">
              <tr>
                {
                  headers.map((header,index)=>(
                    <th key={index}>{header}</th>
                  ))
                }
              </tr>
            </thead>
            <tbody>
              {
                (this.state.objects||[]).map((obj, index)=>(
                  <tr key={index}>
                    {
                      headers.map((header,index)=>(
                        <td key={index}>
                          {obj[header]}
                        </td>
                      ))
                    }
                  </tr>
                ))
              }
              <tr>
                {
                  headers.map((header,index)=>(
                    <td key={index}>
                      <input 
                        name={header} 
                        value={this.state.obj?this.state.obj[header]:''} 
                        onChange={event=>{
                          const obj = this.state.obj||{}
                          obj[header] = event.target.value
                          this.setState({obj})
                        }}
                        className="form-control"
                      />
                    </td>
                  ))
                }
              </tr>
            </tbody>
          </table>

          <button type="submit" name="addRow" onClick={this.handleClick}>Add</button>

        </form>

        <div>
          <pre style={{whiteSpace:'normal'}}>
            {JSON.stringify(this.state.objects)}
          </pre>
        </div>
      </div>
    )
  }
}

ReactDOM.render(
  <Root/>,
  document.getElementById('root')
);

Here is the codepen page, https://codepen.io/mjunaidi/pen/rGBjRL. To add the value we can simply type Enter on inserting the value in the textbox, or press the Add button. There is a word trace for the array of the JSON objects created at the bottom of the table. It shows the JSON array of current objects.

On a different note, totally not related to this simple expereiment, I have just realized CodePen has option to add newly Bootstrap 4 CSS styling into the Pen. It's very cool and fast.

Thanks for reading!