Faire un composant Rule

[salimkanoun]

      {rules.map((rule, index) => (
        <div key={index} style={{ marginTop: 10, display: "flex", gap: 10 }}>
          <SelectInput
            value={rule.DicomTag}
            onChange={(e) => updateRule(index, "DicomTag", e.value)}
            options={Object.values(AutoRoutingRuleDicomTag).map((value) => ({ label: value, value }))}
          />
          <SelectInput
            value={rule.ValueRepresentation}
            onChange={(e) => updateRule(index, "ValueRepresentation", e.value)}
            options={Object.values(AutoRoutingRuleValueRepresentation).map((value) => ({ label: value, value }))}
          />
          <SelectInput
            value={rule.Condition}
            onChange={(e) => updateRule(index, "Condition", e.value)}
            options={Object.values(AutoRoutingRuleCondition).map((value) => ({ label: value, value }))}
          />
          <Input placeholder="Value" value={rule.Value} onChange={(e) => updateRule(index, "Value", e.target.value)} />
          <Button color={Colors.danger} onClick={() => removeRule(index)}>-</Button>
        </div>
      ))}

Fait un composant Rule qui fait ce travail de render plutot que de tout mettre dans Autorouting Root