0

Estoy haciendo una pequeña practica en react y tengo un formulario que necesito renderizar según un bucle for, pero se me dificulta bastante ya que apenas estoy empezando con react. Este es mi código por el momento, tengo el for en un DidMount, si me pueden ayudar muchas gracias de antemano

export class RenderizadoPrueba extends Component{

  constructor(props){
    super(props);
    this.state ={
      value: '',
      nroRenderElemento: 5
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e){
    this.setState({value: e.target.value});
  }

  handleSubmit(e){
    console.log('Este es el nombre introducido:', this.state.value);
    e.preventDefault();
  }

  componentDidMount(){
      for (let indexRender = 0; indexRender < this.state.nroRenderElemento; indexRender++) {
      const nroRender = [indexRender];
      console.log('nro de render:', nroRender)
    }
  }

  render(){
    return(
      <div> 
        <form onSubmit={this.handleSubmit}>
          <label>
            Introduzca su Nombre:
            <input type="text" value={this.state.value} onChange={this.handleChange}/>
          </label>
          <input type="submit" value="Submit"/>
        </form>
      </div>
    )
  }
}

1 respuesta 1

1

Usando for no es imposible pero mas fácil usando algo como .map()

class RenderizadoPrueba extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      nroRenderElemento: 5,
      inputs: []
    }
  }

  componentDidMount() {
    this.setState({
      inputs: [...Array(this.state.nroRenderElemento)].map((input, i) =>
        <input 
            name = {i}
        />
      )
    })
  }

  render() {
    return ( <
      div > {
        this.state.inputs
      } <
      /div>
    )
  }
}

ReactDOM.render( < RenderizadoPrueba / > , document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

3
  • Muchas gracias!!, y como haría para que ademas de renderizar los inputs según el .map , pueda guardar los datos de cada uno de los inputs en un state diferente cuando le de al botón submit?
    – FGutierrez
    Commented el 24 sept. 2019 a las 15:34
  • 1
    Si no son dinámicos los inputs, puedes crear un state por cada input supongamos, en donde el onChange/handleChange cambia también ese state, es decir que siempre tenemos actualizado el value. Si los inputs son dinámicos habría que hacer lo mismo pero creando un objeto o array dentro del state en el mismo momento que creas los inputs, luego a cada input le puedes asignar el mismo handleChange y que actualice el valor del state, pero ahora dentro de un objeto u array dentro del state. Para ello tendrías que pasar alguna referencia, por ejemplo el i del ciclo.
    – Emeeus
    Commented el 24 sept. 2019 a las 15:46
  • Si, los inputs serian dinámicos, me podrías dar un pequeño ejemplo por favor
    – FGutierrez
    Commented el 25 sept. 2019 a las 13:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.