Select to view content in your preferred language

Calcite-List issue in react

78
3
Thursday
vijaybadugu
Frequent Contributor

 

I am trying to render calciteList in reactJS. Nothing is showing on browser 

 <div style={{ border: '2px solid red', padding: '10px', margin: '10px 0' }}>
            <p>Before calcite-list</p>
            <CalciteList style={{ minHeight: '200px', border: '1px solid blue' }}>
              <CalciteListItem label="Hiking trails" description="Designated routes for hikers to use." value="hiking-trails">
              </CalciteListItem>
              <CalciteListItem label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
              </CalciteListItem>
              <CalciteListItem label="Rivers" description="Large naturally flowing watercourses." value="rivers">
              </CalciteListItem>
              <CalciteListItem label="Estuaries" description="Where the river meets the sea." value="estuaries">
              </CalciteListItem>
            </CalciteList>
            <p>After calcite-list</p>
          </div>

 

vijaybadugu_0-1761253263778.png

 

0 Kudos
3 Replies
Justin_Greco
Frequent Contributor

Are you importing calcite-list and calcite-list-item?

import "@esri/calcite-components/dist/components/calcite-list";
import "@esri/calcite-components/dist/components/calcite-list-item";
import { CalciteList, CalciteListItem } from "@esri/calcite-components-react";

 

If you are using React 19+, don't need calcite-components-react wrapper anymore.

0 Kudos
vijaybadugu
Frequent Contributor

Yes. I did 

import "@esri/calcite-components/dist/components/calcite-list";
import "@esri/calcite-components/dist/components/calcite-list-item";
import {
  CalciteShellPanel,
  CalcitePanel,
  CalciteBlock,
  CalciteLabel,
  CalciteCombobox,
  CalciteComboboxItem,
  CalciteSlider,
  CalciteSelect,
  CalciteOption,
  CalciteButton,
  CalciteNotice,
  CalciteList,
  CalciteIcon,
  CalciteListItem,
 
} from '@esri/calcite-components-react';
import "@esri/calcite-components/dist/calcite/calcite.css";
 
 "react": "^19.1.1",
    "react-dom": "^19.1.1"
0 Kudos
vijaybadugu
Frequent Contributor

The problem only with calcite-list and was able to see calcite-list-item with some radio buttons with labels. I don't have any clue what the issue could be 

0 Kudos