how to take array of inputs separated by comma in input tag in react js

Question

I want to take multiple input separated by comma from user using one input field. I used onChange function to store the user input in a state variable. It is storing each letter in each array index. For example, If I enter Red,Blue as input, it is storing like

Array[0]= R
Array[1]= e
Array[2]= d
Array[3]= ,
Array[4]= B
Array[5]= l
Array[6]= u
Array[7]= e

I want to store them like

 Array[0]= Red
 Array[1]= Blue

This is what my onChange handler look like:

changeHandler=(event)=> {
  this.setState({ 
    [event.target.name]:event.target.value
  })
}

How can I do that? I'm new to react js, any help would be appreciated. Thank you.

changeHandler=(event)=>{ this.setState({ [event.target.name]:event.target.value }) } — Teja Sree
– Teja Sree, Commented Apr 17, 2018 at 14:01
Sounds like you're doing a .split('') instead of a .split(','). — Oblosys
– Oblosys, Commented Apr 17, 2018 at 14:05

Upasana · Accepted Answer · 2018-04-17 18:12:22Z

1

Split your input values using comma delimiter:

this.setState({
    [e.target.name]:e.target.value.split(',')
  });

However, if you are using form its better to use onSubmit event to do these kind of operations. On 'onChange' just collect your input. Just a suggestion though.

answered Apr 17, 2018 at 18:12

Upasana

1,9751 gold badge16 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

how to take array of inputs separated by comma in input tag in react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related