React - replace() not working to change symbol to letter - regex

Question

Based on other examples, my regex attempt to replace dashes (-) with letters should work. But it doesn't. I am using React.
I have followed this post (Replace multiple characters in one replace call) and other outside posts but I cannot get regex to replace dashes (-) with certain letters. The app only has one component, App.js. I have also tried writing the line targetNameDashes.replace(/'-'/gi, letter).toUpperCase(); but it hasn't worked either.
GitHub repo: https://github.com/irene-rojas/brooklyn-react
import React, { Component } from 'react';
import './App.css';
class App extends Component {
state = {
names: ['JAKE', 'AMY', 'GINA', 'ROSA', 'CHARLES', 'TERRY', 'HOLT'],
targetName: "",
targetNameDashes: "",
guessRemain: 10,
lettersGuessed: []
}
componentDidMount() {
let targetName = this.state.names[Math.floor(Math.random()*this.state.names.length)];
this.setState({
targetName: targetName,
targetNameDashes: targetName.replace(/[a-zA-Z]/gi , '-').toUpperCase(),
// The flags 'g' and 'i' are for global search and case insensitive search
});
console.log(targetName);
}
onKeyUp = (event) => {
event.preventDefault();
let letter = event.key.toUpperCase();
let targetName = this.state.targetName;
let guessRemain = this.state.guessRemain;
let lettersGuessed = this.state.lettersGuessed;
if (letter) {
this.setState({
guessRemain: guessRemain - 1,
lettersGuessed: lettersGuessed + letter
});
// if letter is in targetName, replace dash with letter
if (targetName.includes(letter)) {
console.log("yup");
let targetNameDashes = this.state.targetNameDashes;
// temporary variable that contains dashes and letters?
targetNameDashes.replace(/-/gi, letter).toUpperCase();
this.setState({
targetNameDashes: targetNameDashes
// does it need a callback to update?
});
}
}
if (guessRemain === 0) {
console.log("too bad");
this.setState({
guessRemain: 10,
lettersGuessed: []
});
this.componentDidMount();
}
console.log(`${letter} end of onKeyUp`);
}
render() {
return (
<div className="App">
<div>
You will be seen by:
<br></br>
{this.state.targetNameDashes}
</div>
<br></br>
<div>
Letters guessed:
<br></br>
<input onKeyUp={this.onKeyUp} />
<br></br>
Letters guessed in this round:
<br></br>
[ {this.state.lettersGuessed} ]
</div>
<br></br>
<div>
Guesses remaining:
<br></br>
{this.state.guessRemain}
</div>
</div>
);
}
}
export default App;

Answer 1

I noticed many issues that I should mention one by one:
Move some of the constants out of the state, for example names. Setting them in state makes no sense because they will not be changed and re-rendered in UI.
You manually called componentDidMount at the end of your key up event handler, which is not they way this should be done. Separate the logic that needs to be re-done in a separate utility function (i.e. gameReset() and call that instead).
The replace logic of the case when targetName.includes(letter) is not correct. It doesn't know which indices to replace.
Think of that this way: your targetName was "EVE", you are asking
a string that looks like "---" to change to wherever "E" is. How can
it know where "E" is without inspecting the original name? A loop
would be a better solution.
setState is asynchronous in nature. You should make use of prevState argument and callback method to ensure you are getting the correct states.
Here I have modified your codes and added comments where necessary, hope it helps:
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
// moved it outside state
const names = ["JAKE", "AMY", "GINA", "ROSA", "CHARLES", "TERRY", "HOLT"];
class App extends React.Component {
state = {
targetName: "",
targetNameDashes: "",
guessRemain: 10,
lettersGuessed: []
};
// utility extracted from componentDidMount
// so that it can be re-used later
resetGame = () => {
let targetName = names[Math.floor(Math.random() * names.length)];
this.setState({
guessRemain: 10,
lettersGuessed: [],
targetName: targetName,
targetNameDashes: new Array(targetName.length).fill("-").join("") // fill an array with hyphens
});
};
componentDidMount() {
// call the utility
this.resetGame();
}
onKeyUp = event => {
event.preventDefault();
let letter = event.key.toUpperCase();
// TODO: provide more logic to avoid bad key strokes
// for example backspace should not count
if (letter) {
this.setState(
prevState => {
let modifiedNameDashes = String(prevState.targetNameDashes);
// for each charecter of targetName
for (var i = 0; i < prevState.targetName.length; i++) {
// check if this charecter at index i matched the key
if (prevState.targetName[i] === letter) {
// if it does
// remove a hyphen from modifiedNameDashes at that exact index
modifiedNameDashes =
modifiedNameDashes.substr(0, i) +
letter +
modifiedNameDashes.substr(i + 1);
}
}
return {
targetNameDashes: modifiedNameDashes,
guessRemain: prevState.guessRemain - 1,
lettersGuessed: [...prevState.lettersGuessed, letter]
};
},
// callback after the state update is done
() => {
// won
if (this.state.targetNameDashes === this.state.targetName) {
console.log("Nice!");
}
// lost
if (this.state.guessRemain === 0) {
this.resetGame();
}
}
);
}
};
render() {
return (
<div className="App">
<div>
You will be seen by:
<br />
{this.state.targetNameDashes}
</div>
<br />
<div>
Letters guessed:
<br />
<input onKeyUp={this.onKeyUp} />
<br />
Letters guessed in this round:
<br />[ {this.state.lettersGuessed} ]
</div>
<br />
<div>
Guesses remaining:
<br />
{this.state.guessRemain}
</div>
<code>{JSON.stringify(this.state)}</code>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

targetNameDashes.replace(/-/gi, letter).toUpperCase();
this.setState({
targetNameDashes: targetNameDashes
// does it need a callback to update?
});
This is likely the source of your problem with nothing happening - String.prototype.replace returns a new version of the string, and doesn't modify the parameter string.
This would at least cause it to update so you can continue to work on the logic here.
this.setState({
targetNameDashes: targetNameDashes.replace(/-/gi, letter).toUpperCase()
});