CODEWITHSUNDEEP
javascript
netchkin
netchkin

Reputation: 1384

Mutate string originating from React state

Let's say for some delicate reason I have the following react state:

{ superGreeting: 'Hello!!!' }

Now, assume I have this complicated operation that basically takes the superGreeting string and works on it, in the end replacing a character at a specific position. New state then should be:

{ superGreeting: 'Hullo!!!' }

So, there would be my action:

action = (index) => {
  var { superGreeting: newGreeting } = this.state;
  newGreeting[index] = 'u';
  this.setState({superGreeting: newGreeting});
}

Unfortunatelly, such approach does not work and ends with: TypeError: Cannot assign to read only property '1' of string 'Hello!!!', indicating this line as the offending one: newGreeting[index] = 'u'

I use react.js, ES6, no redux, no mobx, no immutable.js. Thought that the issue is caused by the string still being related/used by the soon-to-be-previous state, so I thought that creating a copy would work (I tried newGreeting = newGreeting.toString(), '' + newGreeting, `${newGreeting}`, ''.concat(newGreeting), without any success). Any ideas?

Upvotes: 1

Views: 439

Answers (3)

Eoin
Eoin

Reputation: 373

Your problem here does not have anything to do with react. Strings in javascript are immutable.

You could create the following helper function:

var replaceCharAt = function(str, index, c) {
    return str.slice(0, index) + c + str.slice(index+1)
}

so that 

replaceCharAt('012', 1, 'x') === '0x2'

Upvotes: 1

loganfsmyth
loganfsmyth

Reputation: 161647

Strings in JavaScript are immutable. Your example can be trimmed down to

(function(){
    "use strict";
    var str = 'Hullo!!!';
    str[1] = 'e';
})();

If you want to mutate a string, you'll need to create a new string, e.g.

(function(){
    "use strict";
    var str = 'Hullo!!!';
    str = str.slice(0, 1) + 'e' + str.slice(2);
})();

Upvotes: 3

azium
azium

Reputation: 20634

Strings in JS are immutable, but you can turn it into an array, work on it, then join it back together.. also there are string functions like substr and replace which return a new string if those are applicable.

var split = superGreeting.split('')
split[index] = 'u'
var newGreeting = split.join('')

Upvotes: 1

Related Questions