[Bug]: Not getting the selected value from the tree view

[sangeethadevarajibm]

Package

carbon-components-react

Browser

Chrome

Package version

7.25.0

Description

I am trying to integrate unstable_TreeView and unstable_TreeNode in my learning project. I am sharing my code snippet.

import React from 'react';

import { unstable_TreeView as TreeView, unstable_TreeNode as TreeNode } from 'carbon-components-react';

import { Document16, Folder16 } from '@carbon/icons-react'; import 'carbon-components/scss/components/treeview/_treeview.scss';

function renderTree({ nodes, withIcons = false }) { if (!nodes) { return; } console.log(nodes); return nodes.map(({ children, renderIcon, ...nodeProps }) => ( <TreeNode key={nodeProps.id} renderIcon={withIcons ? renderIcon : null} {...nodeProps}> {renderTree({ nodes: children, withIcons })} )); }

const sizes = { default: 'default', compact: 'compact', }; const props = () => ({ active: '5', hideLabel: false, label: 'Tree view', multiselect: false, size: 'default', }); const nodes = [ { id: '1', value: 'Artificial intelligence', label: Artificial intelligence, }, { id: '2', value: 'Blockchain', label: 'Blockchain', }, { id: '3', value: 'Business automation', label: 'Business automation', renderIcon: Folder16, children: [ { id: '3-1', value: 'Business process automation', label: 'Business process automation', }, { id: '3-2', value: 'Business process mapping', label: 'Business process mapping', }, ], }, { id: '4', value: 'Business operations', label: 'Business operations', }, { id: '5', value: 'Cloud computing', label: 'Cloud computing', isExpanded: true, children: [ { id: '5-1', value: 'Containers', label: 'Containers', }, { id: '5-2', value: 'Databases', label: 'Databases', }, { id: '5-3', value: 'DevOps', label: 'DevOps', isExpanded: true, children: [ { id: '5-4', value: 'Solutions', label: 'Solutions', }, { id: '5-5', value: 'Case studies', label: 'Case studies', isExpanded: true, children: [ { id: '5-6', value: 'Resources', label: 'Resources', }, ], }, ], }, ], }, { id: '6', value: 'Data & Analytics', label: 'Data & Analytics', renderIcon: Folder16, children: [ { id: '6-1', value: 'Big data', label: 'Big data', renderIcon: Document16, }, { id: '6-2', value: 'Business intelligence', label: 'Business intelligence', renderIcon: Document16, }, ], }, { id: '7', value: 'IT infrastructure', label: 'IT infrastructure', renderIcon: Folder16, children: [ { id: '7-1', value: 'Data storage', label: 'Data storage', renderIcon: Document16, }, { id: '7-2', value: 'Enterprise servers', label: 'Enterprise servers', renderIcon: Document16, }, { id: '8', value: 'Hybrid cloud infrastructure', label: 'Hybrid cloud infrastructure', children: [ { id: '8-1', value: 'Insights', label: 'Insights', renderIcon: Document16, }, { id: '8-2', value: 'Benefits', label: 'Benefits', renderIcon: Document16, }, ], }, ], }, ];

export default function App() { return (

{renderTree({ nodes, withIcons: true })}

); }

I wanted to select or click on each node and get those data to print on an alert box. Here I wanted to write the onselect or onclick event. But not sure how to write those events and handler.

CodeSandbox example

import React from 'react'; import { unstable_TreeView as TreeView, unstable_TreeNode as TreeNode } from 'carbon-components-react'; import { Document16, Folder16 } from '@carbon/icons-react'; import 'carbon-components/scss/components/treeview/_treeview.scss'; function renderTree({ nodes, withIcons = false }) { if (!nodes) { return; } console.log(nodes); return nodes.map(({ children, renderIcon, ...nodeProps }) => ( <TreeNode key={nodeProps.id} renderIcon={withIcons ? renderIcon : null} {...nodeProps}> {renderTree({ nodes: children, withIcons })} )); } const sizes = { default: 'default', compact: 'compact', }; const props = () => ({ active: '5', hideLabel: false, label: 'Tree view', multiselect: false, size: 'default', }); const nodes = [ { id: '1', value: 'Artificial intelligence', label: Artificial intelligence, }, { id: '2', value: 'Blockchain', label: 'Blockchain', }, { id: '3', value: 'Business

Steps to reproduce

import React from 'react';

import { unstable_TreeView as TreeView, unstable_TreeNode as TreeNode } from 'carbon-components-react';

import { Document16, Folder16 } from '@carbon/icons-react'; import 'carbon-components/scss/components/treeview/_treeview.scss';

function renderTree({ nodes, withIcons = false }) { if (!nodes) { return; } console.log(nodes); return nodes.map(({ children, renderIcon, ...nodeProps }) => ( <TreeNode key={nodeProps.id} renderIcon={withIcons ? renderIcon : null} {...nodeProps}> {renderTree({ nodes: children, withIcons })} )); }

const sizes = { default: 'default', compact: 'compact', }; const props = () => ({ active: '5', hideLabel: false, label: 'Tree view', multiselect: false, // onSelect: action('onSelect (TreeView onSelect)'), // selected: object('Array of selected node IDs (selected)', ['5']), size: 'default', }); const nodes = [ { id: '1', value: 'Artificial intelligence', label: Artificial intelligence, }, { id: '2', value: 'Blockchain', label: 'Blockchain', }, { id: '3', value: 'Business automation', label: 'Business automation', renderIcon: Folder16, children: [ { id: '3-1', value: 'Business process automation', label: 'Business process automation', }, { id: '3-2', value: 'Business process mapping', label: 'Business process mapping', }, ], }, { id: '4', value: 'Business operations', label: 'Business operations', }, { id: '5', value: 'Cloud computing', label: 'Cloud computing', isExpanded: true, children: [ { id: '5-1', value: 'Containers', label: 'Containers', }, { id: '5-2', value: 'Databases', label: 'Databases', }, { id: '5-3', value: 'DevOps', label: 'DevOps', isExpanded: true, children: [ { id: '5-4', value: 'Solutions', label: 'Solutions', }, { id: '5-5', value: 'Case studies', label: 'Case studies', isExpanded: true, children: [ { id: '5-6', value: 'Resources', label: 'Resources', }, ], }, ], }, ], }, { id: '6', value: 'Data & Analytics', label: 'Data & Analytics', renderIcon: Folder16, children: [ { id: '6-1', value: 'Big data', label: 'Big data', renderIcon: Document16, }, { id: '6-2', value: 'Business intelligence', label: 'Business intelligence', renderIcon: Document16, }, ], }, { id: '7', value: 'IT infrastructure', label: 'IT infrastructure', renderIcon: Folder16, children: [ { id: '7-1', value: 'Data storage', label: 'Data storage', renderIcon: Document16, }, { id: '7-2', value: 'Enterprise servers', label: 'Enterprise servers', renderIcon: Document16, }, { id: '8', value: 'Hybrid cloud infrastructure', label: 'Hybrid cloud infrastructure', children: [ { id: '8-1', value: 'Insights', label: 'Insights', renderIcon: Document16, }, { id: '8-2', value: 'Benefits', label: 'Benefits', renderIcon: Document16, }, ], }, ], }, ];

export default function App() { return (

{renderTree({ nodes, withIcons: true })}

); }

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[jnm2377]

Hi @sangeethadevarajibm thanks for opening this issue. Could you provide a link for a codesandbox recreating this issue?

[abbeyhrt]

Closing due to lack of activity, feel free to reach out if we need to reopen and look into this issue!