Hola, estoy tratando de generar filas para un formulario de componente dentro de una devolución de React, la condición para generar las filas es: Generar una fila con un máximo de dos elementos localizables (propiedad).

La matriz:

 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 } ]

Lo sé, tengo errores en la forma en que intento generar filas dentro de Return, pero no sé cómo hacerlo.

 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> </> )