I want to use something similar to getElementById in order to select my element and change the text colour. I currently have a unordered list, and wish to change the colour of each individual depending on an if condition.

<div style={styles.passwordRules}>
  <ul style={styles.listOne}>
    <li style={styles.li}><span style={styles.error} id="test">8 a 16 caratteri</span></li>
    <li style={styles.li}><span style={styles.fontNormal}>Carattere maiuscolo</span></li>
  </ul>
  <ul style={styles.listTwo}>
    <li style={styles.li}><span style={styles.fontNormal}>Un numero</span></li>
    <li style={styles.li}><span style={styles.fontNormal}>Carattere minuscolo</span></li>
  </ul>
  <ul style={styles.listThree}>
    <li style={styles.li}><span style={styles.fontLink}>Nessuna informazione personale</span></li>
  </ul>
</div>

Meaning that for instance, I would like something similar to this:

if(text === 'foo') {
//change colour to grey
}

Please note, I cannot use getElementById

I want to use something similar to getElementById in order to select my element and change the text colour. I currently have a unordered list, and wish to change the colour of each individual depending on an if condition.

<div style={styles.passwordRules}>
  <ul style={styles.listOne}>
    <li style={styles.li}><span style={styles.error} id="test">8 a 16 caratteri</span></li>
    <li style={styles.li}><span style={styles.fontNormal}>Carattere maiuscolo</span></li>
  </ul>
  <ul style={styles.listTwo}>
    <li style={styles.li}><span style={styles.fontNormal}>Un numero</span></li>
    <li style={styles.li}><span style={styles.fontNormal}>Carattere minuscolo</span></li>
  </ul>
  <ul style={styles.listThree}>
    <li style={styles.li}><span style={styles.fontLink}>Nessuna informazione personale</span></li>
  </ul>
</div>

Meaning that for instance, I would like something similar to this:

if(text === 'foo') {
//change colour to grey
}

Please note, I cannot use getElementById

• javascript
• css
• reactjs

3 Answers 3

Why not doing something like this:

<li className={text === 'foo' ? styles.class1 : styles.class2 } .../>

Branching out from Carl Edwards's answer then if it's only the color you want to change, this should do the trick:

<li style={{color: text === "foo" ? "trueColor" : "falseColor"}} ... />

You can do it for example using:

<li style={text ==== 'foo' ? _.extend(styles.style, styles.styleFoo) : styles.style }>

or if using ES6

<li style={text === 'fooo' ? Object.assign({}, styles.style, styles.styleFoo) : styles.style }>