Defining Node Attributes/Props

The second argument that is passed to React.createElement(type, props, children) is an object containing name value properties (a.k.a, props).

Props take on several roles:

  1. Props can become HTML attributes. If a prop matches a known HTML attribute then it will be added to the final HTML element in the DOM.
  2. Props passed to createElement() become values stored in a prop object as an instance property of React.createElement() instances (i.e., [INSTANCE].props.[NAME OF PROP]). Props are normally used to input values into components.
  3. A few special props have side effects (e.g., key, ref, and dangerouslySetInnerHTML)

In one sense you can think of props as the configuration options for React nodes and in another sense you can think of them as HTML attributes.

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

  1. var reactNodeLi = React.createElement('li',
  2.     {
  3.         foo: 'bar',
  4.         id: 'li1',
  5.         // Note the use of the JS className property to change the 
  6.         // class attribute below
  7.         className: 'blue',
  8.         'data-test': 'test',
  9.         'aria-role' :'listitem',
  10.         // Note use of JS camel-cased CSS property backgroundColor below
  11.         style: {backgroundColor:'red'}
  12.     },
  13.     'text'
  14. );

When the above code is rendered to an HTML page the actual HTML created will look like:

  1. <li id="li1" data-test="test" class="blue" aria-role="listitem" style="background-color:red;" data-reactid=".0">text</li>

What you need to realize is only the following attributes get passed to the real DOM from the Virtual DOM

The foo attribute/prop does not show up in the real DOM. This non-standard HTML attribute is available as an instance property of the created li React node instance. (e.g., reactNodeLi.props.foo).

source code

React attributes/props not only translate to real HTML attributes props, they become configuration values that are passed to React components. This aspect of props will be covered in the React component props chapter. For now simply realize that passing a prop into a React node is different from defining a prop on a component to be used as configuration input within a component.

Notes

  • Leaving an attribute/prop blank results in that attribute value becoming true (e.g., id="" becomes id="true" and test becomes test="true")
  • 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"/>).
  • 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