De sus ejemplos, asumo que esos dígitos también deberían estar en los lugares correctos.

Como no ha proporcionado un ejemplo con un caso en el que la entrada del usuario es más corta que el número aleatorio, asumiré que en este caso dicha opción no existe o la está manejando de alguna otra manera.

Ahora que mis suposiciones están definidas, puede hacer esto iterando sobre el número de entrada del usuario convirtiéndolo en una cadena y comparando los símbolos uno por uno. Debe verificar si el símbolo en la posición i es igual en ambos números (input[i] === random_num[i]), pero no olvide que mientras itera sobre la entrada, puede aumentar i más allá de la longitud de random_num, debe verificar esos casos y marcar como incorrecto cada entrada [i] donde i> random_num.length

este es mi intento

 class NumberMemoryGame extends React.Component { constructor(props) { super(props); this.state = {value: '', answer: '123456'}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { event.preventDefault(); } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Guess: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> <div> {[...this.state.value].map((char, i) => ( <span className={`${(char === this.state.answer[i]) ? 'right' : 'wrong'}`}> {char} </span>))} </div> </div> ); } }

Puede encontrar el JS Fiddle aquí .

Suponiendo que está pasando ambas entradas como matrices a un componente y digamos que array_1 es la entrada original y array_2 es la segunda entrada, entonces todo lo que tiene que hacer es

 function App({ array_1, array_2 }) { return ( <div> {array_2.map((val, i) => { if (val === array_1[i]) { return <span>{val}</span>; } return <span className="wrong">{val}</span>; })} </div> ); }