React JS: Check for comma within input value

Question

I have a state object with a nested array of objects called "axisLabels".

If the user is to enter anything into the input, I want to check if there is a comma (comma separated) within event.target.value of the input to update the second object within the array.

How is this possible?

My current function code updates both.

State obj:

selectedTemplateData: {
   axisLabels: ['Option 1', 'Option 2']
}

function to update array:

axisChange(event) {
    event.persist();
    this.setState(prevState => ({
        selectedTemplateData: {
            ...prevState.selectedTemplateData,
            Axislables: [event.target.value, event.target.value]
        }
    }))

}

Usage:

<input type="text"  onChange={(event) => this.axisChange(event)} />

If you want to check comma in event.target.value you can use if (event.target.value.indexOf(',') > -1) { event.target.value.split(',') } — Mohhamad Hasham
– Mohhamad Hasham, Commented Oct 8, 2019 at 10:31

Davin Tryon · Accepted Answer · 2019-10-08 10:31:27Z

3

This would certainly work:

axisChange(event) {
    event.persist();
    this.setState(prevState => ({
        selectedTemplateData: {
            ...prevState.selectedTemplateData,
            Axislables: [...event.target.value.split(',')]
        }
    }))
}

If there is no comma, the value will be preserved. If there is a comma, you can split the values and spread them into the new array.

answered Oct 8, 2019 at 10:31

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

2 Comments

Filth Over a year ago

Perfect and very nice elegant solution! Will mark correct when the timer allows.

Davin Tryon Over a year ago

You might want to check if event.target.value has a value (is not empty ''). This will happily add "".

Alberto Perez · Accepted Answer · 2019-10-08 10:35:13Z

1

Here you'll find other examples, but a simple way to do it is the following:

axisChange(event) {
    event.persist();
    const e = event && event.target && event.target.value;
    const values = e && e.split(',').length > 1
      ? e.split(',')
      : e;
    this.setState(prevState => ({
        selectedTemplateData: {
            ...prevState.selectedTemplateData,
            Axislables: [ values[0], values[1], values[n] ]
        }
    }))
}

answered Oct 8, 2019 at 10:35

Alberto Perez

2,9821 gold badge16 silver badges23 bronze badges

Collectives™ on Stack Overflow

React JS: Check for comma within input value

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related