Tengo una fila de texto que debería cambiar dependiendo de dos condiciones diferentes. La primera condición funciona bien, cambia el texto de un lado a otro entre 'Completado:' y cadena vacía'. Como a continuación.

 render() { return( <div className={container}> {(this.conditionOne ? 'Completed: ' : '') + this.completedValue + '%'} </div> ) }

La segunda condición es lo que no puedo hacer funcionar. Se supone que solo cambia la segunda parte del texto, es decir, this.completedValue + '% '. Mi primer instinto fue envolver esa parte en un div y luego cambiar el CSS para ese div específico como lo intenté aquí.

 render() { return( <div className={container}> {(this.conditionOne ? 'Completed: ' : '') + <div className={this.conditionTwo? 'conditionTwoDiv' : ''}> {this.completedValue + '%'} </div> } </div> ) }

Esto solo representa "Completado: {Objeto Objeto}". Lo único que quiero hacer es cambiar el color del texto cuando this.ConditionTwo es verdadero, pero no puedo encontrar la manera de hacerlo sin tener un gran nido de condiciones o cambiar todo el texto y no solo la ultima parte.

Como probablemente comprenda por la pregunta, no soy el mejor con esta sintaxis o programación en general, por lo que se agradecen las explicaciones que me ayudan a comprender por qué algo funciona o no. ¡Gracias!