saulteafarmer/mmalmi.github.io
1
0
Fork 0
mirror of https://github.com/mmalmi/mmalmi.github.io.git synced 2025-06-05 17:02:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Martti Malmi 2021-09-27 12:51:13 +03:00
parent 7633ae4e39
commit b58681bdac
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
_posts/2021-9-27-gun-for-react-state-management.md
View File

@ -19,25 +19,30 @@ const State = new Gun({
file: 'State.local', file: 'State.local',
multicast: false, multicast: false,
peers: [] peers: []
}); }).get('state');
class CommentForm { class CommentForm extends React.Component {
constructor() {
super();
this.state = {comment:''};
}
componentDidMount() { componentDidMount() {
State.get('comment').on(comment => this.setState({comment})); State.get('comment').on(comment => this.setState({comment}));
} }
onInput(e) { onInput(e) { State.get('comment').put(e.target.value);
State.get('comment').put(e.target.value);
} }
render() { render() {
return { return (
<form> <form class="box">
<input type="text" value={{this.state.comment}} onInput={e => this.onInput(e)} /> <input placeholder="Type something" type="text" value={this.state.comment} onChange={e => this.onInput(e)} />
</form> </form>
} );
} }
} }
``` ```
Now you have a comment form that automatically persists its content. 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).