How to see updated changes


#1

I am trying to develop an atom package. I have 2 radio buttons in a pane and I only want one of them to be selected at a time.

To do this I keep a state object.

this.state = {
      btn1: false,
      btn2: false,
    }

Now when someone selects a button I want to update it using this state object, not the default functionality.
How do I listen to changes and maintain a global state for the duration the pane is visible to the user. I want this state to be destroyed once the pane is closed.


#2

Have you tried using addEventListener to activate a function to change your state information?


#3

Yes I did. But how do I re-render my pane based on the new values.?


#4

That depends on how you’re rendering your pane in the first place. Since Atom is view framework agnostic and you haven’t provided me with any of your code, I can’t say for sure. If you’re using etch, you just run the update() method. If you’re not using etch, there’s a chance that you want to be.


#5

I tried using etch. However I keep on getting an error.

React is not defined

Relevant code.

The class which I am importing in the file.

'use babel';

const etch = require('etch')

export default class MyClass {
  constructor () {
    this.a = 'a';
    etch.initialize(this)
  }
  render () {
    return <div>{this.a}</div>
  }
  update (props, children) {
    this.a='b';
    return etch.update(this)
  }
  async destroy () {
    await etch.destroy(this)
  }
}

Main Code

let temp = new MyClass();
para.appendChild(temp);
this.showpane = atom.workspace.addModalPanel({
      item: para,
});

#6

Where and when is this error appearing, and what line of code is mentioned in the error message?


#7

This was the issue:- Issue on GitHub

I am able to meet my objective using this library. Is there any way to style these tags that I use via etch?


#8

You use the className attribute as normal for React. You can see an example here.


#9

Thanks for all the help.! :slight_smile:


#10

No problem.