diff --git a/_posts/2021-9-27-gun-for-react-state-management.md b/_posts/2021-9-27-gun-for-react-state-management.md index 3912a8b..81981c6 100644 --- a/_posts/2021-9-27-gun-for-react-state-management.md +++ b/_posts/2021-9-27-gun-for-react-state-management.md @@ -19,25 +19,30 @@ const State = new Gun({ file: 'State.local', multicast: false, peers: [] -}); +}).get('state'); -class CommentForm { +class CommentForm extends React.Component { + constructor() { + super(); + this.state = {comment:''}; + } componentDidMount() { State.get('comment').on(comment => this.setState({comment})); } - onInput(e) { - State.get('comment').put(e.target.value); + onInput(e) { State.get('comment').put(e.target.value); } render() { - return { -
- this.onInput(e)} /> + return ( + + this.onInput(e)} />
- } + ); } } ``` -Now you have a comment form that automatically persists its content. \ No newline at end of file +Now you have a comment form that syncs its content across component instances and persists it in localStorage. + +See the working example on [Codepen](https://codepen.io/mmalmi/pen/VwWVdKG). \ No newline at end of file