React DOM Elements

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

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.

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

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 · Second'};
}

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

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

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

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.

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.

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.

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. .

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.