Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

166
Vistas
Generate components React inside return using iteration

Hi I'm trying to generate rows for a component form inside a React return, the condition for generate the rows is: Generate a row with max two elements locatable(property).

The array:

const properties = [
    {
      title: 'Codigo',
      dataIndex: 'code',
      locatable: true
    },
    {
      title: 'Nombre',
      dataIndex: 'name',
      locatable: true
    },
    {
      title: 'Precio',
      dataIndex: 'price',
      locatable: true
    },
    {
      title: 'Fabricante',
      dataIndex: 'maker',
      locatable: true
    }
]

I know, I have errors in the way I'm triying to generate rows inside the Return, but I don't know how do it.

return(
    <>           
            <Form layout="vertical" hideRequiredMark>
                {
                    var propertiesLocatables = []
                    properties.forEach(element => {
                        if(element.locatable)
                            propertiesLocatables.push(element)
                    });
                    
                    var size = Object.keys(propertiesLocatables).length
                    //for each two properties make a row with max two elements
                    for(let i=0; i < size; i+2){
                        <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item name={propertiesLocatables[i].dataIndex} label={propertiesLocatables[i].title}
                                    rules={[{ required: true, message: 'Please enter value' }]}>
                                    <Input placeholder="Please enter value" />
                                </Form.Item>
                            </Col> 
                            if(propertiesLocatables[i+1].dataIndex!==undefined)
                            {
                                <Col span={12}>
                                    <Form.Item name={propertiesLocatables[i+1].dataIndex} label={propertiesLocatables[i+1].title}
                                        rules={[{ required: true, message: 'Please enter value' }]}>
                                        <Input placeholder="Please enter value" />
                                    </Form.Item>
                                </Col>     
                            }       
                        </Row>
                    }
                }
            </Form>
    </>
)
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda