get value from an input field in react

Question

I try to make a form validator for a inputfield. I try to get the input value from it using the getElementById().value method. But when I console log the variable is empty. I tried to convert my variable into a string, it doesn't solve the problem. When I type some extra text, the counter next to it increases. But no worthy value showed. How come it's not showing the right input value? thanks!

code of my validator:

const newName = document.getElementById('name');
let newNameValue = document.getElementById('name').value;

let beerArrayNames = this.state.beerArrayName;
newName.addEventListener('input', function(event) {
  console.log('test ' + newNameValue);


  if (beerArrayNames.includes(newNameValue)) {
    newName.setCustomValidity('This already exist!');
  } else {
    newName.setCustomValidity('');
  }
});

<p>Name: <input type='text' id='name' name='name' placeholder='fill in the name' required/> </p>

Where are you using this in React? Do you have sample code of how it's applied? The containing class for example? — Eddie D
– Eddie D, Commented May 31, 2018 at 16:19
@EdwinDelRio I'm coding an react.js app but need a validtion to check if the input value name is already used in my back end. — Dave_888
– Dave_888, Commented May 31, 2018 at 16:31

Allen G · Accepted Answer · 2018-05-31 16:36:00Z

4

Even though this question has an accepted answer already, I think it's important to note that a solution more in line with React's design principles would be to not directly retrieve elements in the DOM and attach event listeners to them.

Instead, you can define an onChange prop for the input element, which when triggered validates the input (and most likely update some UI state to show/hide error messages).

A good example of how to use of onChange exists in the forms documentation.

answered May 31, 2018 at 16:36

Allen G

4584 silver badges6 bronze badges

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

Comments

Sacha · Accepted Answer · 2018-05-31 16:11:52Z

2

You need to set your variable inside your event listener (I commented out the other stuff because it doesn't work and is not part of your question)

newNameValue = this.value;

const newName = document.getElementById('name');
let newNameValue;

//let beerArrayNames = this.state.beerArrayName;
newName.addEventListener('input', function(event) {
  newNameValue = this.value;
  console.log('test ' + newNameValue);


  //if (beerArrayNames.includes(newNameValue)) {
    //newName.setCustomValidity('This already exist!');
  //} else {
    //newName.setCustomValidity('');
  //}
});

<p>Name: <input type='text' id='name' name='name' placeholder='fill in the name' required/> </p>

answered May 31, 2018 at 16:11

Sacha

3321 silver badge8 bronze badges

Comments

RIYAJ KHAN · Accepted Answer · 2018-05-31 16:16:36Z

1

You should fetch value using event.target.value.

newName.addEventListener('input', function(event) {
  console.log('test ', event.target.value);

});

Working plunker

answered May 31, 2018 at 16:16

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

get value from an input field in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related