1

Tengo un formulario

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nombre: '',
            comensales: '',
            ingredientes: [],
            masIng: 0
        }
    }
    handleIngredientes = () => {
        let count = this.state.masIng
        this.setState({ masIng: count+1 })
    }
    render() {
        return (
            <div>
                <p>Receta</p>
                <input type='text' name='nombre' placeholder='nombre' />
                <input type='number' name='comensales' placeholder='comensales' />
                <p>ingredientes <button className='btn' onClick={this.handleIngredientes}>Mas ingredientes</button></p>
                <App />
                {this.state.masIng > 0 ? <App /> : null}
                {this.state.masIng > 1 ? <App /> : null}
                {this.state.masIng > 2 ? <App /> : null}
                {this.state.masIng > 3 ? <App /> : null}
                {this.state.masIng > 4 ? <App /> : null}
                {this.state.masIng > 5 ? <App /> : null}
            </div>
        );
    }
}

y un componente que es un input

class App extends React.Component {
  render() {
      return (
          <div>
            <input type='text' name='ingrediente' placeholder='ingrediente' />
            <input type='number' name='cantidad' placeholder='cantidad' />
          </div>
      );
  }
}

Mi duda es la siguiente: ¿cual es la forma correcta para que el usuario pueda darle al boton de mas ingredientes y se añadan inputs dinamicamente y pueda guardar correctamente el value y la cantidad de cada ingrediente en el estado de mi componente principal?

1
  • ¿Por qué no usar un bucle? el 28 ago. 2019 a las 8:01

1 respuesta 1

1

Puedes generar cada elemento en un bucle, con lo que no tienes que poner un if para cada línea (lo que limita innecesariamente el número de líneas)

class Item extends React.Component {

  constructor(props) {
        super(props);      
  }
  
  render() {
    return <p> Elemento {this.props.index} </p>;
  }

}

class App extends React.Component {

  constructor(props) {
    super(props);      
  }
  
  generateRows(n) {
    let rows = [];
    for (let i=0; i<n; i++) {
      rows.push(<Item index={i}/>);
    }
    return rows;
  }
  
  render() {
    return (<div> {this.generateRows(this.props.amount)} </div>);
  }

}

ReactDOM.render(<App amount="3"/>, document.getElementById('root'));
<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="root"></div>

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.