Preact: class objects no longer working with computed property names

[Zashy]

I've been using versions of the following in my code, and recently tried updating preact from 7.2.0 to 8.1.0. However now these instances are rendering as class="[object Object]" instead of the expected list of class names.

render() {
  var variable = 'other-class'
  return <div class={{ 'some-value': true, [variable]: true }} />
}

7.2.0 example
8.1.0 example

Seems like computed property names stopped working between the versions.

[developit]

Hi @Zashy! The object class syntax was actually removed in 8.0.0 (changelog). It is recommended to use classnames, which supports more cases without creating intermediary objects. Here is your example written in classnames:

import cx from 'classnames';
render() {
  var variable = 'other-class'
  return <div class={cx('some-value', variable)} />
}

As you can see, the arguments/array syntax is actually a little nicer - any falsey values are removed from the generated className. It also supports the Object syntax much like your example, and you can nest any of these formats infinitely.

There's a full migration guide for going from 7.x to 8.x here: https://gist.github.com/developit/89e0e6decb8fb5eb00def024b6fb7bd7

In that guide you will find the breaking changes, and polyfills that will let you make 8.x behave just like 7.x (including for class={{ foo:true }}).

[Zashy]

Thanks for the reply. Oops forgot to reply to this for ages. I was trying to find the change log, but missed it somehow. Some of the docs were a bit confusing, and still listed the old way. I think the readme mentioned the old way, but seems fixed now so that's great.

[developit]

Yup all fixed now! We don't keep a changelog.md for this project, instead opting to use Github Releases - I agree it can be confusing though!