Problem using Select in react "There are more children items inside the Select component than items inside the Select collection"

[Pablo_Vellido]

Hi,  I'm trying to use a "select" component in an app that uses a dql result as a select options source. The problem is that when the app tries to render the component it returns an error:

main.js:102916  Uncaught Error: There are more children items inside the Select component than items inside the Select collection. Please check if the id of the SelectOption components is unique.
    at validateNesting (main.js:102916:13)

at main.js:103073:7
at invokePassiveEffectCreate (main.js:19996:31)
at HTMLUnknownElement.callCallback2 (main.js:6910:24)
at Object.invokeGuardedCallbackDev (main.js:6935:26)
at invokeGuardedCallback (main.js:6969:41)
at flushPassiveEffectsImpl (main.js:20058:19)
at unstable_runWithPriority (main.js:3585:22)
at runWithPriority$1 (main.js:11707:20)
at flushPassiveEffects (main.js:19962:24)

but the select options array seems to be ok, without duplicates:

[
    "<SelectOption id=\"GDN-DT-ORA19\">GDN-DT-ORA19</SelectOption>",
    "<SelectOption id=\"GDNVTUBU2004-1\">GDNVTUBU2004-1</SelectOption>",
    "<SelectOption id=\"GDNVTWIN1064LM1\">GDNVTWIN1064LM1</SelectOption>",
    "<SelectOption id=\"HOST-CWS-4-IG-1-HG-200001\">HOST-CWS-4-IG-1-HG-200001</SelectOption>",
    "<SelectOption id=\"HOST-CWS-4-IG-1-HG-200002\">HOST-CWS-4-IG-1-HG-200002</SelectOption>",
...

this is my code to fill the array from dql results object:

const query = "fetch dt.entity.host | fields entity.name | summarize count(), by:{entity.name} | fields entity.name";
 const [resultDql, setResult] = useState<QueryResult>();
 useEffect(() => {
  queryExecutionClient.queryExecute({
      body: {
        query,
        requestTimeoutMilliseconds: 30000,
      },
    })
    .then((res) => setResult(res.result));
 }, []);

var arr : any[] = [];
resultDql?.records?.forEach(function (value) {
   if (value != null ) {
    arr.push("<SelectOption id=\"" + value['entity.name']?.toString() + "\">" + value['entity.name'] + "</SelectOption>");
   }
});

and the select field:

<Select name="Host"
          selectedId={singleValueHost}
          onChange={setSingleValueHost}
          hasFilter>
          { arr }
 </Select>

[stefan_eggersto · Accepted solution]

Hi Pablo,

I could reproduce this error. The reason for the error is a wrong approach to construct the SelectOptions. You are creating an array of strings, but what you actually need to do is create elements of SelectOptions. You can find an example at https://developer.dynatrace.com/reference/design-system/preview/forms/Select/#pass-large-amounts-of-... (click on "Show code" to reveal the source code of the example).

Here is a full example of your query tied to a Select component. Let me know if this works for you.

import { QueryResult, queryExecutionClient } from "@dynatrace-sdk/client-query";
import { AppHeader, Page, Select, SelectOption, SelectedKeys } from "@dynatrace/strato-components-preview";
import React, { useEffect, useState } from "react";

export const App = () => {
  const query = "fetch dt.entity.host | fields entity.name | summarize count(), by:{entity.name} | fields entity.name";
  const [singleValueHost, setSingleValueHost] = useState<SelectedKeys | null>(null);
  const [resultDql, setResult] = useState<QueryResult>();
  useEffect(() => {
    queryExecutionClient
      .queryExecute({
        body: {
          query,
          requestTimeoutMilliseconds: 30000,
        },
      })
      .then((res) => setResult(res.result));
  }, []);

  return (
    <Page>
      <Page.Header>
        <AppHeader />
      </Page.Header>
      <Page.Main>
        {resultDql?.records && (
          <Select name="Host" selectedId={singleValueHost} onChange={setSingleValueHost} hasFilter>
            {resultDql.records
              // first extract the host name of the record for easier access when constructing the SelectOption
              .map((hostRecord) => (hostRecord?.["entity.name"] as string) ?? "")
              .map((hostName) => (
                <SelectOption key={hostName} id={hostName}>
                  {hostName}
                </SelectOption>
              ))}
          </Select>
        )}
      </Page.Main>
    </Page>
  );
};