CODEWITHSUNDEEP
javascriptreactjs
cyberoy
cyberoy

Reputation: 373

Create class in ReactJs using JSX

I want to create class in React using JSX. I have a dashboard built on react. I selected a part and through inspect element (Google developer console) I got the react id. Now, I want to create a class using JSX, like class=newclass . I have plan to use it in further CSS. I can insert manually from template. But, I want to do it through JSX, also want to test from console temporarily by running the code fron console. This is present area :-

<label data-reactid=".0.b.1.0.1.1.0.0.0.0.0.0">This is text</label>

and I want to add a class there using JSX, 

<label data-reactid=".0.b.1.0.1.1.0.0.0.0.0.0" class="newclass">This is text</label>

Upvotes: 1

Views: 584

Answers (2)

madox2
madox2

Reputation: 51841

Try this:

<label className='newclass'>This is text</label>

Upvotes: 2

Yoni Mor
Yoni Mor

Reputation: 354

JSX tags and attributes may differ from HTML ones. Please view the following resource: https://facebook.github.io/react/docs/tags-and-attributes.html

Indeed, a class in JSX is created via the "className" attribute instead of "class". To place the class on the element you can simply do:

<label data-reactid=".0.b.1.0.1.1.0.0.0.0.0.0" className="newclass">This is text</label>

To insert a dynamic class you should use something like the following syntax :

var newclass = this.props.newclass; return ( <label data-reactid=".0.b.1.0.1.1.0.0.0.0.0.0" className={newclass}>This is text</label> );

Upvotes: 0

Related Questions