Cannot use `style.css_class_name` syntax directly with React 15.3.1

[avesus]

Warning: Failed prop type: Invalid prop className of type object supplied to ActiveComponent, expected string.

Have to type style.css_class_name + '' all the time...

I understand that that's some kind of React's limitations, because the object generated from csjs string has toString() method and should be treated by React as real string too.

What I doing wrong because I can't find the same issues from other people?

[rtsao]

Yeah, it appears the returned styles aren't satisfying React.PropTypes.string.

You could also do String(style.css_class_name) if that's more convenient. I might have to have a method on the returned styles object such as styles.getClassNames() which returns the string names of the classes as an object literal for all the styles. So that would be like:

typeof styles.css_class_name; // object
var classes = styles.getClassNames();
typeof classes.css_class_name // string

Or I might be able to use the String constructor and then add properties to that. But because typeof new String('foo') === 'object' I suspect that won't work.

[scott113341]

@avesus, are you using react-router-active-component by any chance? That library is enforcing the className prop to be a string, as you can see here.

However, this is unique to that particular library. React does not require className to be a true string, as it will get cast to one.

[avesus]

@scott113341 thanks a lot! I have that problems mostly with that component.

[rtsao]

Formalized this here: https://github.com/rtsao/csjs/issues/62