Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Update how placeholder property triggers a component re-render.

See original GitHub issue
  1. What version of RJEA are you using (react-json-editor-ajrm version)? 2.5.5
  2. What operating system and processor architecture are you using? macOS 10.13.6
  3. What did you do? Update placeholder passed to RJEA through onChange
  4. What did you expect to see? Cursor position is maintained
  5. What did you see instead? Cursor position is reset to 0
import React, { Component } from 'react';
import JSONInput from 'react-json-editor-ajrm';
import locale    from 'react-json-editor-ajrm/locale/en';

class App extends Component {
    this.state = {
      obj: {name: 'Bob'},
    this.objUpdate = this.objUpdate.bind(this);

      this.setState({obj: arg.jsObject});
  render() {
    return (
        id          = 'a_unique_id'
        placeholder = { this.state.obj }
        locale      = { locale }
        onChange    = { this.objUpdate }

export default App;

This is my App.js after create-react-app and adding RJEA. I’m passing obj which belongs to App’s state as placeholder. Whenever I trigger an onChange (use the arrow keys, make edits) the state is set again.

Just moving the cursor around and waiting for an update (1 sec) causes the cursor to jump to start. Without fix

Moving the this.getCursorPosition() above the onChange() partially fixes the error. The cursor no longer jumps to the start, but when the cursor is at the start of a line it jumps to the end of the previous line. With fix

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

AndrewRedicancommented, Sep 23, 2018

Hi @cgvedant,

Your observation was brilliant. I’ve taken your feedback into account. I’ve extended the logic to how changes in placeholder determine whether component will re-render:

If the same value for the placeholder property is provided, the component it will not re-render. However, if the component’s content has already been edited and differs from its initial placeholder value, sending the same placeholder value will effectively allow the component to re-render, thus resetting it.

Please let me know if this works for you.

cgvedantcommented, Sep 23, 2018

@AndrewRedican I see a potential issue with the way showPlaceholder updates. Suppose I’m editing a JSON with a reset button that resets the content to some template. Previously for this type of reset to work, we could just pass the same template JSON but as a new object. But now we would need to actually change the content of the template or make an intermediate change for the reset to work. This is not how I’m going to use this component, but it could be a very confusing gotcha for people who don’t know how this component treats placeholder.

I feel the best way to go forward is to let react handle the diffing of props and always accept the latest value from the placeholder. Again, adding a flag that ignores placeholder after mount looks like the best design to me(I’m very new to react though).

Read more comments on GitHub >

github_iconTop Results From Across the Web

When does React re-render components? - Felix Gerschau
Want to see re-rendering in action? React DevTools lets you highlight renders under Components -> View Settings -> Highlight updates when ...
Read more >
How and when to force a React component to re-render
Generally, forcing a React component re-render isn't best practice, even when React fails to update the components automatically.
Read more >
than needed React components re-rendering when typing in ...
I understand that setSearchInput will re-render SearchBar component whenever I type in it, but I don't get why CompanyList re-renders. Search ...
Read more >
What Causes a React Component to Re-Render - YouTube
In this video, I will go over what causes a react component to re-render.The base reason a component re-renders is because the props...
Read more >
Dynamically Change State-Bound Content on Successful API ...
Elements of the rendered content of a React component can be bound against properties of the component's state . Whenever we update the ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found