How to see updated changes


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.


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


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


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.


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';
  render () {
    return <div>{this.a}</div>
  update (props, children) {
    return etch.update(this)
  async destroy () {
    await etch.destroy(this)

Main Code

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


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


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?


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


Thanks for all the help.! :slight_smile:


No problem.