Prevent usage of wrong DOM property JS-0455
Unknown property 'class' found, use 'className' instead
181
182 if ( attributes.anchor ){
183 return(
184 <div class="editor-offcanvas-route has-anchor">185 <pre>
186 { __( 'Add this anchor: #', 'ekiline-collection' ) }
187 { attributes.anchor }Unknown property 'class' found, use 'className' instead
404 <InnerBlocks.Content />
405 <button
406 type="button"
407 class="btn-close"408 data-bs-dismiss="offcanvas"
409 data-bs-target={ (attributes.parentId)?'#' + attributes.parentId:null }
410 aria-label="Close"/>Unknown property 'tabindex' found, use 'tabIndex' instead
322 return (
323 <div
324 { ...blockProps }
325 tabindex="-1"326 role="dialog"
327 aria-labelledby={ blockProps.id + 'Label' }
328 aria-hidden="true"Unknown property 'class' found, use 'className' instead
192 }
193
194 return(
195 <div class="editor-offcanvas-route">196 { __( 'Do not forget to add an #anchor. ', 'ekiline-collection' )}
197 </div>
198 )Unknown property 'class' found, use 'className' instead
319 return (
320 <button
321 type="button"
322 class="modal-resize btn btn-sm position-absolute bottom-0 mb-2 ms-1"323 aria-label={__( 'play btn', 'ekiline-collection' )}>
324 <span class="dashicons dashicons-editor-expand"></span>
325 </button>
Description
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class attribute instead.
Bad Practice
import React from 'react';
const Hello = <div class="hello">Hello World</div>;
Recommended
import React from 'react';
const Hello = <div className="hello">Hello World</div>;