settings are only applied on first render
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript, react
- Domain
- frontend
Research direction
Start at the react-json Editor component and inspect how its settings prop is handled after the first render. Reproduce the provided JsonUpdate example with settings loaded asynchronously, then verify that the editor applies the updated settings without requiring an initial placeholder render.
Written by the indexing model from the issue text.
Description
I created a generic editor component, where both the data and the settings are retrieved using Ajax.
The standard React Ajax initialization pattern is used.
The initial setting value was {}. The react-json code correctly displays the data retrieved by the Ajax call but ignores the corresponding new setting value.
Generating a placeholder for the initial render before the Ajax call responds is one way to workaround the problem.
var React = require('react');
var RxDom = require('rx-dom');
var Editor = require('react-json');
class JsonUpdate extends React.Component {
constructor(props) {
super(props);
this.name = props.name;
this.state = {
value: {},
settings: {}
};
}
componentDidMount() {
Rx.DOM.ajax("/status/" + name)
.subscribe(
function (data) {
var info = JSON.parse(data.response);
this.setState({
value: info.data,
settings: info.settings
});
}.bind(this),
function (error) {
console.log(error);
}
);
}
postChange(value) {
var str = JSON.stringify(value);
Rx.DOM.ajax({url: "/apply/" + name, body: str, method: "POST"})
.subscribe(
function (data) {
},
function (error) {
console.log(error);
}
);
}
render() {
if (Object.getOwnPropertyNames(this.state.settings).length == 0)
return <div />;
else
return (
<Editor value={this.state.value} settings={this.state.settings}
onChange={this.postChange}></Editor>);
}
}
module.exports = JsonUpdate;
- Dominant language
- JavaScript
- Stars
- 97
- Forks
- 38
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from arqex/react-json
-
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
arqex/react-json#11 · 1 comment ·
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
arqex/react-json#9 · 1 comment ·
-
Difficulty 4/5 3-5 days Newbie friendliness 20/100
arqex/react-json#7 · 9 comments ·
-
publish Open
Difficulty 3/5 1-2 days Newbie friendliness 35/100
arqex/react-json#6 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 30/100
arqex/react-json#3 · 1 comment ·
All issues in arqex/react-json
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
HarperFast/skills#96 ·
-
[Block] Latest Posts [Type] Bug
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
sugarlabs/musicblocks#8847 ·