I'm starting to learn reactjs and I want to view the data on the table after I input text on the input fields and show the data on a console log. How can I show all the data input to the page?

onAdd(employee_name, employee_age, employee_salary){
console.log(employee_name, employee_age, employee_salary);}

I expect to show the data input in the input fields in the page. Thank you

1 Answers

0
AryanJ-NYC On

This should work:

import React, { Component } from 'react';

class EmployeeInput extends Component {
  state = {
    employee_name: '',
    employee_age: '',
    employee_salary: '',
  };
  handleChange = e => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };
  render() {
    return (
      <form>
        <div>
          <label>
            employee_name
            <input name="employee_name" type="text" onChange={this.handleChange} />
          </label>
          Value: {this.state.employee_name}
        </div>
        <div>
          <label>
            employee_age
            <input name="employee_age" type="text" onChange={this.handleChange} />
          </label>
          Value: {this.state.employee_age}
        </div>
        <div>
          <label>
            employee_salary
            <input name="employee_salary" type="text" onChange={this.handleChange} />
            Value: {this.state.employee_salary}
          </label>
        </div>
      </form>
    );
  }
}

Here's a running example: https://stackblitz.com/edit/react-jl2skw?file=index.js