How to handle onChange ReactJs? Details inside cant explain in question

Question

Hi I have a problem in react user input text. I have a list of items together with an input text. When i typed inside the first input, all input boxes changes. how to deal with this.

example code

handleEditChange(event) {
        event.preventDefault();
        console.log(event.target.name)
        console.log(event.target.value)
        this.setState({
            [event.target.name]: event.target.value
        });
    };


{items.map(item=> (
  <input type="text" class="form-control bg-light" placeholder="Reply" name="reply" value= 
  {this.state.reply} onChange={this.handleChange} />
))}

So the input box will repeat based on the loop, for example it will be 3 input boxes. picture sample

How can i prevent this? thanks for help

twharmon · Accepted Answer · 2020-04-13 13:33:57Z

1

Could you use <input ... name={item.name} value={this.state[item.name]}> or something like that?

answered Apr 13, 2020 at 13:33

twharmon

3,7905 gold badges27 silver badges50 bronze badges

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

Comments

emeraldsanto · Accepted Answer · 2020-04-13 13:31:49Z

0

You need to have separate state variables for each input value. You're currently looping through your items and rendering an identical input for each, with the same value being this.state.reply.

According to the picture you attached, you could wrap each input in a Discussion component which would take care of handling only one input at a time.

answered Apr 13, 2020 at 13:31

emeraldsanto

4,7611 gold badge17 silver badges28 bronze badges

1 Comment

Michael Ben Gabriel Over a year ago

how can i do that, im having trouble in my setState when i change the name of the name={"reply" + item.id}

Collectives™ on Stack Overflow

How to handle onChange ReactJs? Details inside cant explain in question

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related