How can I call the input value on my function ReactJs

Question

Hi I am trying to call the value of my input inside the form to my fetch fuction however it can't read it please help me... I was going to do a fetch post so i can insert it inside my table...

my function is like

handleSubmit() {
  debugger
  function createNewProfile(profile) {
    const formData = new FormData();
    formData.append('Employee_Name', profile.Employee_Name);
    formData.append('Address', profile.Address);
    formData.append('Department', profile.Department);
    return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', {
      method: 'POST',
      body: formData
    }).then(response => response.json())
  }

  createNewProfile(profile)
      .then((json) => {
            // handle success
          }
      ).catch(error => error);
}

and this is my form where i want my

<form onSubmit={this.handleSubmit}>
    <div className="container">
        <div className="modal-body">
            <table>
                <tbody>
                <tr>
                    <td>Name</td>
                    <td>
                        <input type="text"
                               name="Employee_Name"
                               className="EmployeeDetails"
                               value={this.props.Employee_Name}/>
                    </td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>
                        <input type="text"
                               name="Address"
                               className="EmployeeDetails"
                               value={this.props.Address}
                               onChange={this.props.handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td>Department</td>
                    <td>
                        <input type="text"
                               name={this.props.Department}
                               className="EmployeeDetails"
                               value={this.props.Department}/>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
    <div className="modal-footer">
        <input type="submit" className="btn btn-info" onClick={ this.handleSubmit} value=" Add Employee"/>
        <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</form>

Answer 1

You are controlling the form values from parent component, so i will suggest you to pass a submit function also from parent component and onClick of submit, do the api call in parent.

If you do api call in parent component, then you need to access the values by this.state.key and if you do the api call in child then you need to use this.props.key to access the values.

Note: I am assuming you are updating the input values in parent component on change in child component, because you passed the onChange function from parent.

Api call in child component:

handleSubmit(){
    let profile = this.props;
    const formData = new FormData();
    formData.append('Employee_Name', profile.Employee_Name);
    formData.append('Address', profile.Address);
    formData.append('Department', profile.Department);
    fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(response => {
        //handle success
    })
}

Api call in parent component:

handleSubmit(){
    let profile = this.state;
    const formData = new FormData();
    formData.append('Employee_Name', profile.Employee_Name);
    formData.append('Address', profile.Address);
    formData.append('Department', profile.Department);
    fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(response => {
        //handle success
    })
}

Update:

You need to bind the handleSubmit function in the constructor, write the constructor like this:

constructor(){
    super();
    this.state = {};
    this.handleSubmit = this.handleSubmit.bind(this)
}