design-system
design-system copied to clipboard
puppetlabs
Convert Styleguidist's initialState/setState to React's useState hook in docs
Remove usage of Styleguidist's initialState/setState/state and replace with React’s useState hook instead. (This will be required when we upgrade to Styleguidist 11.) For example:
- initialState = { count: 42 };
- <Button onClick={() => setState({ count: state.count + 1 })}>{state.count}</Button>
+ const [count, setCount] = React.useState(42);
+ <Button onClick={() => setCount(count + 1)}>{count}</Button>
Thanks @trybick! This would be the docs for each component that use Styleguidist's initialState/setState. We have *.md Markdown files in the same folder as each component that include fenced code blocks, which get rendered into live editable examples in the docs. This search of *.md component docs files that have setState should show all the current instances that can be refactored to use React's useState hook instead.
@vine77 I've started a PR for this - #334 - but when I run the site, I'm getting not defined errors. For example in Input.md I'm getting value is not defined. I guess I can add useState to create value. But I'm confused how state was working before without initialState in Input.md?
I think it might be better if this was broken into multiple Issues, one for each component because the PR #334 is pretty big and there are syntax issues with it. It's tedious to fix them because there's no IDE syntax support in the MD files (at least that I've seen).
I'm going to stop working on this, but the branch is started for someone else to complete if they want. What's remaining is the fix the syntax issues by running the app and addressing the errors in the console.