Gracias de antemano ya que soy nuevo en esto. Estoy tratando de representar estos campos a continuación dinámicamente en React y, al hacerlo, quiero usar Flexbox o CSS-Grid para lograr la forma a continuación: (4fr 2fr 2fr) para la primera fila y (2fr 2fr 2fr 1fr 1fr) para el segunda fila. No tengo idea de cómo abordar esto cuando renderizo dinámicamente un componente. Me encantaría que estos respondieran.

Probé flexbox y css-grid sin éxito, particularmente cómo hacerlo con renderizado dinámico. Dado que el campo Organización es un menú desplegable, estará fuera del renderizado.

Mi código de reacción:

 <div className="container"> <OrganizationDropDown /> {inputsArray.map(field => { return ( <TextInput key={field.id} className=`child-${?}` /> ) })} </div>