@@ -67,47 +67,52 @@ See [https://primer.style/react/ActionMenu](https://primer.style/react/ActionMen
6767``` jsx
6868const fieldTypes = [
6969 {leadingVisual: TypographyIcon, text: ' Text' },
70- {leadingVisual: NumberIcon, text: ' Number' },
71- ];
72-
73- const [ selectedItem , setSelectedItem ] = React . useState ()
74-
75- < DropdownMenu
76- renderAnchor = {({children, ... anchorProps}) => (
77- < ButtonInvisible { ... anchorProps} >
78- { children}
79- < / ButtonInvisible >
80- ) }
81- placeholder = " Select a field type "
82- items = {fieldTypes }
83- selectedItem = {selectedItem}
84- onChange = {() => setSelectedIndex (index)}
85- / >
70+ {leadingVisual: NumberIcon, text: ' Number' }
71+ ]
72+
73+ const Example = () => {
74+ const [ selectedItem , setSelectedItem ] = React . useState ()
75+
76+ return (
77+ < DropdownMenu
78+ renderAnchor = {({ children, ... anchorProps}) => < ButtonInvisible { ... anchorProps} > {children} < / ButtonInvisible > }
79+ placeholder = " Select a field type "
80+ items = {fieldTypes }
81+ selectedItem = {selectedItem}
82+ onChange = {() => setSelectedIndex (index) }
83+ / >
84+ )
85+ }
8686```
8787
8888 </td >
8989<td valign =" top " >
9090
9191``` jsx
9292const fieldTypes = [
93- {icon: < TypographyIcon/ > , name: ' Text' },
94- {icon: < NumberIcon/ > , name: ' Number' },
95- ];
96-
97- const [selectedItem , setSelectedItem ] = React .useState ()
98-
99- < ActionMenu>
100- < ActionMenu .Button > {selectedItem ? selectedItem .name : ' Select a field type' }< / ActionMenu .Button >
101- < ActionMenu .Overlay >
102- < ActionList selectionVariant= " single" >
103- {fieldTypes .map (field => (
104- < ActionList .Item onSelect= {() => setSelectedItem (field)} key= {field .name }>
105- < ActionList .LeadingVisual > {field .icon }< / ActionList .LeadingVisual >
106- {field .name }
107- < / ActionList .Item >
108- < ActionList>
109- < / ActionMenu .Overlay >
110- < ActionMenu>
93+ {icon: < TypographyIcon / > , name: ' Text' },
94+ {icon: < NumberIcon / > , name: ' Number' }
95+ ]
96+
97+ const Example = () => {
98+ const [selectedItem , setSelectedItem ] = React .useState ()
99+
100+ return (
101+ < ActionMenu>
102+ < ActionMenu .Button > {selectedItem ? selectedItem .name : ' Select a field type' }< / ActionMenu .Button >
103+ < ActionMenu .Overlay >
104+ < ActionList selectionVariant= " single" >
105+ {fieldTypes .map (field => (
106+ < ActionList .Item onSelect= {() => setSelectedItem (field)} key= {field .name }>
107+ < ActionList .LeadingVisual > {field .icon }< / ActionList .LeadingVisual >
108+ {field .name }
109+ < / ActionList .Item >
110+ ))}
111+ < / ActionList>
112+ < / ActionMenu .Overlay >
113+ < / ActionMenu>
114+ )
115+ }
111116```
112117
113118</td >
0 commit comments