Give className to the matching element in a forEach loop with React.js

Question

Guys, I have a random word in my example, and I divide these random words into spaces.

Then I check to see if the word has a specific letter in it, and use the forEach loop to achieve this. This is my function;

  getLetter:function(e){ var val = e.currentTarget.textContent; this.state.letters.forEach(function(letter) { if (letter === val) { alert("There is 'r' letter in the word.") e.target.className = 'clicked'; letter.className='foundedLetter'; } }); 

I can give the e.target class, but I cannot give the class a consistent letter in forEach loop.

How can i do this?

Thanks in advance.

JSFIDDLE

Answer 1

I changed the definition of for-loop to a for loop to make it more readable to the eye.

  getLetter(e) { var val = e.currentTarget.textContent; for (let letter of this.state.letters) { if (letter === val) { e.target.className = 'clicked'; letter.className = 'foundedLetter' } } } 

This part of the code should work if only the letter variable you want to assign to the class Name is not a string character.

Make sure you also deploy spans. You can also look at this.refs and the link in your range. with this you can get a DOMElement and set the class name for it. I will show you how to use refs to get DOMelements:

  var MyCom = React.createClass({ getInitialState: function() { return { random: 'lorem', letters:[], letter: '' } }, splitLetter:function(){ var s = this.state.random; for (var i = 0; i < s.length; i++) { this.state.letters.push(s.charAt(i)); } this.setState({ letters:this.state.letters }) }, getLetter:function(e){ var val = e.currentTarget.textContent; var _this = this; this.state.letters.forEach(function(letter) { if (letter === val) { alert("There is 'r' letter in the word.") console.log(letter, val); e.target.className = 'clicked'; _this.setState({letter: letter}) } }); }, render: function() { return ( <div> <p>The word is: <strong>{this.state.random}</strong></p> <p>Click the button first then click the r letter below</p> <button onClick={this.splitLetter}>Split letter</button> <p>Click on: <strong><span onClick={this.getLetter}>r</span></strong></p> {this.state.letters.map(function(item){ return ( <div> <span className={item == this.state.letter ? 'foundedLetter' : ''}>{item}</span> </div> ) },this) /*added this to map function */ } </div> ) } }); ReactDOM.render( <MyCom/>, document.getElementById("app") ) 

e.g. console.log (this.state.letters)

<span> H </span> → you can give it className

H → you cannot give className

Answer 2

If I understand correctly when a letter matches 'r' , you want r in 'lorem' (written down with line breaks between each letter) to have a special class name. To do this, you must selectively set className in the rendering method using curly braces and JS code:

 {this.state.letters.map(function(item) { return ( <div className={item === 'r' ? 'selected-letter' : ''}> {item} </div> ) })} 

or the same thing using the arrow function.

 {this.state.letters.map((item) => <div className={item === 'r' ? 'selected-letter' : ''}> {item} </div> )} 

Here it is in the fiddle .

Of course, if you want the user to select a letter to match, then it should be in component state: fiddle .

 {this.state.letters.map((item) => <div className={item === this.state.letterToMatch ? 'selected-letter' : ''}> {item} </div> )} 

Edit

Fiddle , where you can also choose which letter to choose.

 onLetterSelected: function(e) { this.setState({ letterToMatch: e.currentTarget.textContent }); }