I am looking for a way to select elements and change text color in my unordered list based on specific conditions. Below is an example of the structure I have:
<div style={styles.passwordRules}>
<ul style={styles.listOne}>
<li style={styles.li}><span style={styles.error} id="test">8 to 16 characters</span></li>
<li style={styles.li}><span style={styles.fontNormal}>Uppercase character</span></li>
</ul>
<ul style={styles.listTwo}>
<li style={styles.li}><span style={styles.fontNormal}>A number</span></li>
<li style={styles.li}><span style={styles.fontNormal}>Lowercase character</span></li>
</ul>
<ul style={styles.listThree}>
<li style={styles.li}><span style={styles.fontLink}>No personal information</span></li>
</ul>
</div>
I would like to apply different text colors based on conditions, similar to the following example:
if(text === 'foo') {
//change color to gray
}
Please keep in mind that I am unable to use getElementById