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 by enlarge are 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.

var reactNodeLi = React.createElement('li',
{
    foo:'bar',
    id:'li1',
    //note use of JS class property representing class attribute below
    //e.g., className
    className:'blue',
    'data-test':'test',
    'aria-test':'test',
    //note use of JS camel-cased CSS property below
    //e.g., backgroundColor
    style:{backgroundColor:'red'}
},
'text'
);

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

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

What you need to realize is only standard HTML attributes, data-*, and aria-* 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 but can also become configuration values that can be passed to React components. This aspect of props will be covered in the React component props chapter. For now simply realize that passing a React node a prop 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):
accept acceptCharset accessKey action allowFullScreen allowTransparency alt
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
charSet checked classID className colSpan cols content contentEditable
contextMenu controls coords crossOrigin data dateTime default defer dir
disabled download draggable encType form formAction formEncType formMethod
formNoValidate formTarget frameBorder headers height hidden high href hrefLang
htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
lang list loop low manifest marginHeight marginWidth max maxLength media
mediaGroup method min minLength multiple muted name noValidate nonce open
optimum pattern placeholder poster preload radioGroup readOnly rel required
reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
summary tabIndex target title type useMap value width wmode wrap

results matching ""

    No results matching ""