I am facing a problem in JavaScript/ReactJS

Question

I am working in ReactJS on post API. I have given a task to create some text fields in which I have to give some values and then on click of a submit button the information from text field will be submitted to POST API which I have taken from JasonPlaceHolder.

I have written a code which is given at last. Whenever I click Register button the value in last input field (which in my case is "EMAIL") overrides the values of all the input fields.

A screenshot of my problem is also attached:

Screenshot of Problem

Code

import React from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';


class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {
          error: null,
          isLoaded: false,
          items: [],
          inter:0,
          ID: '',
          Name: '',
          username : '',
          Email: ''
        };
this.updateInput = this.updateInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
  }
  updateInput(event){
    this.setState({ID : event.target.value})
    this.setState({Name : event.target.value})
    this.setState({username : event.target.value})
    this.setState({Email : event.target.value}) 
    }
  handleSubmit(){
    var dict = { id: this.state.ID, name:this.state.Name , username: this.state.username , email: this.state.Email };

    axios.post('https://jsonplaceholder.typicode.com/users', dict)
    .then(response => {
      console.log(response)
      this.setState({isLoaded:true,
                      flag:1,
                    })
    })
    .catch(error => {
      alert(error);
      console.log(error);
    })
    }

  render() {

    const { error, isLoaded, items } = this.state;

    if (this.state.inter == 0){

      return(
      <div>

<form>    
    <p>ID:<input type="text" name="ID" onChange={this.updateInput}/> </p>
    <p>Name:<input type="text" name="name" onChange={this.updateInput} /> </p>
    <p>User Name:<input type="text" name="username" onChange={this.updateInput} /></p>
    <p>Email: <input type="text" name="email" onChange={this.updateInput} /></p> 
</form> 


  
      <button onClick={this.handleSubmit}>
      Register
      </button>

      </div>
      );
 

    }else{

      return(

      <div>
      <button onClick={this.handleSubmit} >
      Register
      </button>

      <h1> Post Request Submitted Successfully</h1>


      </div>

      );
    }

  }

  componentDidMount() {

    }
}

export default App;

Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer
– halfer, Commented Nov 9, 2020 at 8:02

Ar26 · Accepted Answer · 2020-11-08 07:41:02Z

1

Your updateInput method overrides all the other fields, that's why the last updated field (the email) is the one you are seeing on the request payload. To solve this you can separate the updateInput method for each input field or inside updateInput check which field you're currently updating and update only that field.

You can check here for more details:

https://medium.com/@zacjones/handle-multiple-inputs-in-react-with-es6-computed-property-name-e3d41861ae46

answered Nov 8, 2020 at 7:41

Ar26

1,1391 gold badge15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Punit Makwana · Accepted Answer · 2020-11-08 07:36:21Z

1

You have to update the fields like this,

updateInput({target: {name, value}}){
    this.setState({[name]: value});
  }

edited Nov 8, 2020 at 7:36

Punit Makwana

5451 gold badge7 silver badges14 bronze badges

answered Nov 8, 2020 at 7:34

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges

Comments

urchmaney · Accepted Answer · 2020-11-08 07:39:41Z

1

The issue is in the updateInput method. change it to.

const { name, value } = event.target;
this.setState(state => ({
  ...state, [name]: value,
}));

N:B You will have to make the names of the input element same as the state field.

answered Nov 8, 2020 at 7:39

urchmaney

6185 silver badges8 bronze badges

Comments

Prathap Parameswar · Accepted Answer · 2021-09-09 05:40:36Z

1

Change your updateInput logic to this.

updateInput(event){
  this.setState({[event.target.name] : event.target.value})
}

edited Sep 9, 2021 at 5:40

answered Nov 8, 2020 at 7:36

Prathap Parameswar

4991 gold badge3 silver badges11 bronze badges

1 Comment

AHMAD IRSHAD Over a year ago

i hav tried this but this time output on console show empty spaces instead of input values when register button is clicked

Collectives™ on Stack Overflow

I am facing a problem in JavaScript/ReactJS

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related