How works event.target.value?

JavaScript
1

Tell us what’s happening:
Heii, I don’t know how the event.target.value works…
Can someone explain me?
(I know my code is wrong)

I know that “event” is the argument, but what are “target” and “value” ?

Your code so far


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input:''
    };
    // change code below this line
this.handleChange = this.handleChange.bind(this)
    // change code above this line
  }
  // change code below this line

handleChange(event) {
   this.setState({event.target.value}) 
}
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input input={this.state.input} onChange={handleChange}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/create-a-controlled-input

1 Like
2

Basically it retrieves value of whatever input it was called on.

In this case, it’s your input element so whatever you insert in your input can be accessed through event.target.value

3 Likes
3

But how can I use it?
So, how can I write it in my code?

4

Like you are using it here.

You can set a value in your component’s state to it.

5

So I using it correctly?
Because the program say, it is wrong:
(
SyntaxError: unknown: Unexpected token, expected , (14:23)
12 |
13 | handleChange(event) {

14 | this.setState({event.target.value})
| ^
15 | }
16 | // change code above this line
17 | render() {
)

Update: The Arrow shows the dot between “event” and “target”

6

you are not specifying which key in your state object you want to update

in this case you want to update the input key in your state

1 Like
8

This is correct

You have defined input in your state with:

this.state = {
      input:''
    };

This is the part where the users input should update the input key in your state.
You are getting the value from the input textbox but it is not updating the input key in your state

handleChange(event) { this.setState({event.target.value}) }
9

The way event works, it is all objects. It is applicable to all javascript, not only in react.

event provides a set of properties that can be accessed. Where you’ll find that set of properties is in their instruction reference called DOM API.

You access objects’ properties by using dot . notation
example:

var dog = {
   legs: 4,
   name: 'doggie'
}

console.log(dog.name) // -> doggie

Same way how event.target works :slight_smile:
event.target.value is called chaining because you combine the two processes.

var target = event.target;
var value = target.value;

So when finding which properties to access, you can start from this search term at google “DOM API html input”. You will see this result: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

And there you’ll see what properties you can access. You will see value there and other bunch of properties.

6 Likes
11

Other people have explained it well, go head and go back and read them again.

Think of how you assign values to keys in an object literal which was covered in previous exercises.

12

try to mimic this one https://reactjs.org/docs/forms.html#controlled-components

13

Thank you, know I understand it!

14

Nice job. Remember to mark as solved the post when it is already done. :slight_smile:

15

handleChange = (event) => {
this.setState({input: event.target.value})
}

16

Hey, this article should be useful!

1 Like
17

Hi
And how do I get the value from a selecti input??
event.target.value return: unified