React DOM Elements

React DOM Elements

React implements a browser-independent DOM system for performance and cross-browser compatibility.

checked

This is useful for building controlled components.

The checked attribute is supported by 'input' components of type checkbox or radio.

You can use it to set whether the component is checked.

className

To specify a CSS class, use the className attribute, this applies to all regular DOM and SVG elements like <div>, <a>, and others.

dangerouslySetInnerHTML

dangerouslySetInnerHTML — Is React’s replacement for using innerHTML in the browser DOM.

Setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack, so, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

htmlFor

Since for is a reserved word in JavaScript, React elements use htmlFor instead.

onChange

The onChange event behaves as you would expect it to: whenever a form field is changed, this event is fired.

selected

You can use it to set whether the component is selected. This is useful for building controlled components.

The selected attribute is supported by 'option' components.

style

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.

suppressContentEditableWarning

Normally, there is a warning when an element with children is also marked as contentEditable, because it won’t work. This attribute suppresses that warning.

suppressHydrationWarning

If you use server-side React rendering, normally there is a warning when the server and the client render different content, if you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. .

value

You can use it to set the value of the component. This is useful for building controlled components.

The value attribute is supported by 'input' and 'textarea' components.

React DOM Elements — Structure map

Clickable & Draggable!

React DOM Elements — Related pages: