Tengo un objeto en el estado que almacena el valor actual de cuatro casillas de verificación de 'Tipo de riesgo'
riskTypes: {"Fraud": true, "Steal": true, "Scam": true, "Theft": true},en el subcomponente para renderizarlos, uso:
Object.keys(this.props.riskTypes).forEach(key => { <li> <label> <input type="checkbox" value={key} checked={this.props.riskTypes[key].value} onChange={this.handleRiskTypeChange} /> {key} </label> </li> }) }pero esto no funciona, no se procesa nada, sin embargo, si los consola. Los registro en lugar de crear casillas de verificación, los imprime bien. ¡Cualquier ayuda muy apreciada!
React espera JSX de alguna forma, ya sea HTML o una matriz de HTML. forEach no ofrece eso, ya que muta la matriz en lugar de devolver una nueva matriz.
map sobre las entradas de Object.entries para producir algo de JSX basado en la información en el estado, y cuando venga a actualizar el nuevo estado, asegúrese de mantener las propiedades del estado anterior.
También estoy usando un atributo de name en los elementos de entrada.
const { Component } = React; class Example extends Component { constructor(props) { super(); this.state = { riskTypes: props.riskTypes, tempProp: 'temp', tempProp2: 'temp2' }; } handleRiskTypeChange = (e) => { // Get the name of the input, and its checked value const { name, checked } = e.target; // Because state is a nested object we // 1) need to keep the state // 2) update `riskTypes` using the existing // riskTypes values, and updating only the one we // need to update based on the name of the input this.setState({ ...this.state, riskTypes: { ...this.state.riskTypes, [name]: checked } }, () => console.log(JSON.stringify(this.state))); } getRiskTypes = () => { const { riskTypes } = this.state; const entries = Object.entries(riskTypes); return entries.map(([key, value]) => { return ( <li> <label> <input name={key} type="checkbox" value={key} checked={value} onChange={this.handleRiskTypeChange} />{key} </label> </li> ); }); } render() { return ( <ul>{this.getRiskTypes()}</ul> ); } }; const riskTypes = {'Fraud': true, 'Steal': true, 'Scam': true, 'Theft': true }; ReactDOM.render( <Example riskTypes={riskTypes} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>