Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

161
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!