Showing results for 
Show  only  | Search instead for 
Did you mean: 

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

Dynatrace Enthusiast
Dynatrace Enthusiast

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 | fields | summarize count(), by:{} | fields";
 const [resultDql, setResult] = useState<QueryResult>();
 useEffect(() => {
      body: {
        requestTimeoutMilliseconds: 30000,
    .then((res) => setResult(res.result));
 }, []);

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

and the select field:

<Select name="Host"
          { arr }




Dynatrace Mentor
Dynatrace Mentor

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 (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";

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

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

Featured Posts