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',
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 {
<form>
<input type="text" value={{this.state.comment}} onInput={e => this.onInput(e)} />
return (
<form class="box">
<input placeholder="Type something" type="text" value={this.state.comment} onChange={e => this.onInput(e)} />
</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).