JSFiddle - React, Tailwind, and code Playground

by koehr

HTML

<h1>
Look into your Javascript console!
</h1>

JavaScript

function reactive(obj) {
  const wrapped = {}

  for (let key in obj) {
    let value = obj[key]

    Object.defineProperty(wrapped, key, {
      get: function reactiveGetter() {
        return value
      },
      set: function reactiveGetter(newValue) {
        console.log('setting value from', value, 'to', newValue)
        value = newValue
      }
    })
  }

  return wrapped
}

const reactiveData = reactive({
  foo: 1
})

reactiveData.foo++
console.log(reactiveData.foo)