ReactJs: Invalid DOM property `classname` error

Question

I am parsing a HTML string to React.js and render it as HTML element using "ReactHtmlParser" suggested in that previous post React.js: Raw HTML string does not gets recognized as HTML elements from Node.js. Now, I am trying add Bootstrap style attribute on it, by doing the following:

app.get('/myCart', (req, res) => {
  var data;
  var htmlString ="";
  var total = 0;

  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("cart");
    dbo.collection("items").find().toArray(function(err, result) {
      if (err) throw err;
      console.log("here")
      data = result
      for(let item of data){
        htmlString += "<div className=\"row\"><div className=\"col\">" + item.desc + "</div>" + "<div className=\"col\">" + item.price + "</div></div>"
        total += item.price
      }
      console.log("total is" + total)
      htmlString +="<div className=\"row\"><div>" + total + "</div><div>"
      console.log(htmlString)
      res.send({express: htmlString})
      db.close();
    });
  });

My render method:

render(){
    console.log(this.state.cartData)
    return(
        <div className="col">
            <div>{ReactHtmlParser(this.state.cartData)}</div>
        </div>
    )
}

As you can see, it is actually className not classname. However, when I render it to front-end, it got error saying that Invalid DOM property classname. Did you mean className

I really have no idea because I only put className as attribute. Does it have to do with ReactHtmlParser?

It would be wrong because react use className as its default attribute — Spencer Ovetsky, Sep 28 '18 at 15:46
just try out `class` ... I got the feeling that it might work — Jonas Wilms, Sep 28 '18 at 15:47
its HTML string so you just write there class instead of className — Arif Rathod, Sep 28 '18 at 15:47
You know, the post you linked to suggests to use `dangerouslySetInnerHTML`. this is [react's API to set html strings](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml). — Sagiv b.g, Sep 28 '18 at 15:48
@JonasWilms it worked. This question makes me feel dumb. Do you want to post the comment the answer so i can close this question? — Spencer Ovetsky, Sep 28 '18 at 15:50
@SpencerOvetsky I still think it is just how you are fetching the html, thinking maybe you set it to say it was HTML and it parses your string as HTML block which normalizes your attributes. If you set it to be text and not HTML it might keep the attribute camelCased correctly. — epascarello, Sep 28 '18 at 15:53

score 5 · Accepted Answer · answered Sep 28 '18 at 15:56

5

TheReactHTMLParser parses HTML, so you have to use the HTML class property.

If you use className, the parser will lowercase the properties as html props are always lowercase, resulting in the error you get.

answered Sep 28 '18 at 15:56

Jonas Wilms

132,000
20
149
151

score 0 · Answer 2 · answered Sep 28 '18 at 16:03

You can check this document (https://reactjs.org/docs/dom-elements.html), React DOM is not HTML DOM will have some difference in attribute name like className in React DOM vs class in HTML DOME

All Supported HTML Attributes As of React 16, any standard or custom DOM attributes are fully supported.

React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the camelCase convention just like the DOM APIs:

<div tabIndex="-1" />      // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API
<input readOnly={true} />  // Just like node.readOnly DOM API

These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.

Some of the DOM attributes supported by React include:

accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList 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 profile 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

Similarly, all SVG attributes are fully supported:

accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight
clip clipPath clipPathUnits clipRule colorInterpolation
colorInterpolationFilters colorProfile colorRendering contentScriptType
contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
end exponent externalResourcesRequired fill fillOpacity fillRule filter
filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
limitingConeAngle local markerEnd markerHeight markerMid markerStart
markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
numOctaves offset opacity operator order orient orientation origin overflow
overlinePosition overlineThickness paintOrder panose1 pathLength
patternContentUnits patternTransform patternUnits pointerEvents points
pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
spacing specularConstant specularExponent speed spreadMethod startOffset
stdDeviation stemh stemv stitchTiles stopColor stopOpacity
strikethroughPosition strikethroughThickness string stroke strokeDasharray
strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
textDecoration textLength textRendering to transform u1 u2 underlinePosition
underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

ReactJs: Invalid DOM property `classname` error

2 Answers2

Linked