Defining Attributes/Props in JSX

In the previous chapter, section 4.4, I discussed passing React.createElement(type, props, children) attributes/props when defining React nodes. Since JSX is transformed into React.createElement() function calls you basically already have a understanding of how React node attributes/props work. However, since JSX is used to express XML-like nodes that get turned into HTML, attribute/props are defined by adding the attributes/props to JSX expressions as name-value attributes.

In the code example below I am defining a React <li> element node, using JSX, with five attributes/props. One is a non-standard HTML attribute (e.g., foo:'bar') and the others are known HTML attributes.

  1. var styles = {backgroundColor:'red'};
  2. var tested = true;
  3. var text = 'text';
  5. var reactNodeLi = <li id=""
  6.                       data-test={tested?'test':'false'}
  7.                       className="blue"
  8.                       aria-test="test"
  9.                       style={styles}
  10.                       foo="bar">
  11.                           {text}
  12.                   </li>;
  14. ReactDOM.render(reactNodeLi, document.getElementById('app1'));

The JSX when it is transformed will look like this (note that attributes/props just become arguments to a function):

  1. var reactNodeLi = React.createElement(
  2.     'li',
  3.     { id: '',
  4.         'data-test': tested ? 'test' : 'false',
  5.         className: 'blue',
  6.         'aria-test': 'test',
  7.         style: styles,
  8.         foo: 'bar' },
  9.     text
  10. );

When the reactNodeLi node is render to the DOM it will look like this:

  1. <div id="app1">
  2.     <li id="true"
  3.         data-test="test"
  4.         class="blue"
  5.         aria-test="test"
  6.         style="background-color:red;"
  7.         data-reactid=".0">
  8.             text
  9.     </li>
  10. </div>

You should note the following:

  1. Leaving an attribute/prop blank results in that attribute value becoming true (e.g., id="" becomes id="true" and test becomes test="true")
  2. The foo attribute, because it was not a standard HTML attribute, doesn’t become a final HTML attribute.

Notes

  • If an attribute/prop is duplicated the last one defined wins.
  • If you pass props/attributes to native HTML elements that do not exist in the HTML specification, React will not render them. However, if you use a custom element (i.e., not a standard HTML element) then arbitrary/custom attributes will be added to custom elements (e.g., <x-my-component custom-attribute="foo" />).
  • Omitting the value of an attribute/prop causes JSX to treat it as true (i.e., <input checked id type="checkbox" /> becomes <input checked="true" id="true" type="checkbox">). This will even occur for attributes/props that are not presented in the final HTML due to the fact they are not actual HTML attributes.
  • The class attribute has to be written className
  • The for attribute has to be written htmlFor
  • The style attribute takes a reference to an object of camel-cased style properties
  • HTML form elements (e.g., <input></input>, <textarea></textarea>, etc.) created as React nodes support a few attributes/props that are affected by user interaction. These are: value, checked, and selected.
  • React offers the key, ref, and dangerouslySetInnerHTML attributes/props that don’t exist in DOM and take on a unique role/function.
  • All attributes are camel-cased (e.g., accept-charset is written as acceptCharset) which differs from how they are written in HTML.
  • The following are the HTML attributes that React supports (shown in camel-case):
  1. accept acceptCharset accessKey action allowFullScreen allowTransparency alt
  2. async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
  3. charSet checked classID className colSpan cols content contentEditable
  4. contextMenu controls coords crossOrigin data dateTime default defer dir
  5. disabled download draggable encType form formAction formEncType formMethod
  6. formNoValidate formTarget frameBorder headers height hidden high href hrefLang
  7. htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
  8. lang list loop low manifest marginHeight marginWidth max maxLength media
  9. mediaGroup method min minLength multiple muted name noValidate nonce open
  10. optimum pattern placeholder poster preload radioGroup readOnly rel required
  11. reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
  12. shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
  13. summary tabIndex target title type useMap value width wmode wrap