How to conditionally add attributes to react DOM element

Question

I have a scenario where I'm using React.js to create a div using the following code :

React.createElement('div', {}, "div content") 

Some additional javascript processing will allow me afterwards to deduce if this div needs to have the className attribute set to" ClassA" or "ClassB" or if it shouldn't have className at all.

Is there a way in javascript to access the div that was created from the React DOM and to add to it the className attribute?

Note : I couldn't achieve this is JSX so I resorted to the createElement method.

Edit: it is worth to mention that i might need to conditionally add attributes other than className. For example, I might need to add to an anchor tag an "alt" attribute or not based on conditional logic. Thank you in advance.

Answer 1

Use JSX spread. Build and object with props, modify it however you like and pass it to component like so:

const props = {
    name: 'SomeName'
}

if (true) {
    props.otherName = 'otherName';
}

return (
    <SomeComponent {...props}/>
);

See that ... syntax? That spread operator do the job - all props will end up as separate attributes on your component.

Take a look at this plunk: http://www.webpackbin.com/4JzKuJ9C-