Create class in ReactJs using JSX

Question

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>

Can you provide a little bit of clarity for me? You say you could specify the class in your template, but want to do it through JSX. But in React apps, the template is defined using JSX - they're not two different things. And the reactid is managed by the framework and appears on the resulting DOM nodes. Where are you wanting to define your class? Almost always, this is done as @madox2 describes below. — Josh David Miller
– Josh David Miller, Commented Jan 11, 2016 at 9:02

Josh David Miller · Accepted Answer · 2016-01-11 09:03:15Z

2

Try this:

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

edited Jan 11, 2016 at 9:03

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

answered Jan 11, 2016 at 8:41

madox2

52.3k21 gold badges106 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cyberoy Over a year ago

But, how to insert the class to that particular reactid? In a page there are so many places.

madox2 Over a year ago

Just set the className attribute to your JSX element

Yoni Mor · Accepted Answer · 2016-01-11 08:53:47Z

0

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> );

edited Jan 11, 2016 at 8:53

answered Jan 11, 2016 at 8:46

Yoni Mor

3541 gold badge2 silver badges12 bronze badges

Collectives™ on Stack Overflow

Create class in ReactJs using JSX

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related