@@ -414,14 +414,14 @@ Now we can render a Tree using far less code.
414414
415415``` tsx example
416416<Tree aria-label = " Files" style = { {height: ' 300px' }} defaultExpandedKeys = { [' documents' , ' photos' , ' project' ]} >
417- <MyTreeItem title = " Documents" >
418- <MyTreeItem title = " Project" >
419- <MyTreeItem title = " Weekly Report" />
417+ <MyTreeItem id = " documents " title = " Documents" >
418+ <MyTreeItem id = " project " title = " Project" >
419+ <MyTreeItem id = " report " title = " Weekly Report" />
420420 </MyTreeItem >
421421 </MyTreeItem >
422- <MyTreeItem title = " Photos" >
423- <MyTreeItem title = " Image 1" />
424- <MyTreeItem title = " Image 2" />
422+ <MyTreeItem id = " photos " title = " Photos" >
423+ <MyTreeItem id = " one " title = " Image 1" />
424+ <MyTreeItem id = " two " title = " Image 2" />
425425 </MyTreeItem >
426426</Tree >
427427```
@@ -460,7 +460,7 @@ function FileTree(props: TreeProps<FileType>) {
460460 return (
461461 <Tree
462462 aria-label = " Files"
463- defaultExpandedKeys = { [1 , 4 ]}
463+ defaultExpandedKeys = { [' 1 ' , ' 4 ' ]}
464464 /* - begin highlight -*/
465465 items = { items }
466466 /* - end highlight -*/
@@ -506,7 +506,7 @@ A user can click on a different item to change the selection or click on the sam
506506
507507``` tsx example
508508// Using the example above
509- <FileTree selectionMode = " single" defaultSelectedKeys = { [2 ]} defaultExpandedKeys = { [1 ]} />
509+ <FileTree selectionMode = " single" defaultSelectedKeys = { [' 2 ' ]} defaultExpandedKeys = { [' 1 ' ]} />
510510```
511511
512512### Multiple selection
@@ -515,7 +515,7 @@ Multiple selection can be enabled by setting `selectionMode` to `multiple`.
515515
516516``` tsx example
517517// Using the example above
518- <FileTree selectionMode = " multiple" defaultSelectedKeys = { [2 , 4 ]} defaultExpandedKeys = { [1 ]} />
518+ <FileTree selectionMode = " multiple" defaultSelectedKeys = { [' 2 ' , ' 4 ' ]} defaultExpandedKeys = { [' 1 ' ]} />
519519```
520520
521521### Disallow empty selection
@@ -525,7 +525,7 @@ In this mode, if a single item is selected and the user presses it, it will not
525525
526526``` tsx example
527527// Using the example above
528- <FileTree selectionMode = " single" defaultSelectedKeys = { [2 ]} defaultExpandedKeys = { [1 ]} disallowEmptySelection />
528+ <FileTree selectionMode = " single" defaultSelectedKeys = { [' 2 ' ]} defaultExpandedKeys = { [' 1 ' ]} disallowEmptySelection />
529529```
530530
531531
0 commit comments