React.js fails to dynamically apply CSS class

Question

We're having issues with using react object className as a props variable. This is keeping us from dynamically loading an image by detecting the class name & matching the name to the correct image in a large CSS sprite (100+ images). The data is sent continually via a websocket endpoint, and as the react object changes, we need to display a new image.

During debugging we can see that className has been applied to the element, but the image isn't loading correctly and the class seems to be inactive.

var Item = React.createClass(
    {
        displayName: 'Item',
        render: function(){
            var itemClass = classNames("item", this.props.name);
            return (
                <div className={itemClass} ></div>
            )
        }
    }
);

Answer 1

This is not because of react .

Check if your are adding proper class of the image. If yes, try inspecting the style property of the class. There is a possible chance that you have given a invalid css value for a property