Soy nuevo en React y tengo dificultades para hacer un bucle y mostrar el resultado. Estoy tratando de descubrir cómo recorrer un objeto con la clave como una cadena y el valor como una matriz de números que necesito dividir. Por ejemplo aquí están los datos ingrese la descripción de la imagen aquí
Quiero imprimir algo como "ha obtenido 0/40 puntos de Cliente" y lo mismo para el resto de ellos.
Aquí está mi código
getGaugeData = () => { const ranges = gaugeStore.getRanges(); console.log(ranges); // const gaugeScore = Object.entries(ranges).forEach(([key, value]) => <div>`you've earned ${value[0]}/${value[1]} ${key} points!`</div>); // console.log('score', gaugeScore); }Aquí es donde se invoca la función getGaugeData:
render() { const scale = courseDataStore.getCustomData(`mti-${this.props.saveKey}`); return ( <div className={`${this.classNamePrefix}-view ${this.props.breakpoint}`} style={{ backgroundImage: `url(${this.props.backgroundImage})` }}> <NestedComponent component={this.props.gauges} parent={this} shouldIgnoreEmpty={false} /> <div className={`${this.classNamePrefix}-content`}> <h2 className={`${this.classNamePrefix}-heading`} dangerouslySetInnerHTML={{ __html: this.props.heading}} /> <div className={`${this.classNamePrefix}-body`} dangerouslySetInnerHTML={{ __html: this.props.body}} /> {this.getGaugeData()} {this.props.continueBtn && this.props.continueBtn.data && this.props.continueBtn.data.label && <NestedComponent component={this.props.continueBtn} parent={this} onClick={this.props.navigateNext} /> } </div> *{this.getGaugeData()}* </div> ); }Pero cuando registro la variable gaugeScore en la consola, obtengo undefined en lugar de la impresión div 4 veces.
La forma más fácil de recorrer todas las entradas de objetos es llamar a Object.entries y luego recorrer la matriz.
El problema que tiene es que necesita usar map en lugar de forEach, porque desea mapear una lista de datos en una lista de elementos jsx.
const gaugeScore = Object.entries(ranges).map(([key, value]) => <div key={key}>`you've earned ${value[0]}/${value[1]} ${key} points!`</div>)Algo como esto debería funcionar. Y recuerda que puedes poner este código entre corchetes jsx sin asignarlo a una variable.