Skip to content

Commit 095777b

Browse files
Gabriel Ferreiradanez
Gabriel Ferreira
authored andcommitted
doc(readme): refactor controlled components to hooks
1 parent c89e2c0 commit 095777b

File tree

1 file changed

+14
-18
lines changed

1 file changed

+14
-18
lines changed

README.md

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -274,24 +274,20 @@ In this mode react-tabs does not handle any tab selection state internally and l
274274
This mode also enforces you to set a handler for `onSelect`. `defaultIndex` does not have any effect and will therefore throw an error.
275275
276276
```js
277-
class App extends Component {
278-
constructor() {
279-
super();
280-
this.state = { tabIndex: 0 };
281-
}
282-
render() {
283-
return (
284-
<Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
285-
<TabList>
286-
<Tab>Title 1</Tab>
287-
<Tab>Title 2</Tab>
288-
</TabList>
289-
<TabPanel></TabPanel>
290-
<TabPanel></TabPanel>
291-
</Tabs>
292-
);
293-
}
294-
}
277+
const App = () => {
278+
const [tabIndex, setTabIndex] = useState(0);
279+
280+
return (
281+
<Tabs selectedIndex={tabIndex} onSelect={index => setTabIndex(index)}>
282+
<TabList>
283+
<Tab>Title 1</Tab>
284+
<Tab>Title 2</Tab>
285+
</TabList>
286+
<TabPanel></TabPanel>
287+
<TabPanel></TabPanel>
288+
</Tabs>
289+
);
290+
};
295291
```
296292
297293
## Styling

0 commit comments

Comments
 (0)