How to show x power 2 (sup) in button element

Question

I'm creating a standard calculator in a reactjs projects. There is a button which calculates x power 2 for that i'm using html element <sup> to do that but that is not working

<Button name = "x<sup>2</sup>" clickHandler = {this.buttonClickHandler} />

Button element is created from this code:

<button onClick = {this.buttonClickHandler}>{this.props.name}</button>

I want to show text like this x²

HeySora · Accepted Answer · 2019-07-14T12:46:12.830

1

You need to use dangerouslySetInnerHTML like this:

<button onClick={this.buttonClickHandler} dangerouslySetInnerHTML={{__html: this.props.name}} />

--- Original post below, because the author didn't specified the "x²" was coming from React ---

Buttons doesn't work like inputs. They are regular tags (that don't close themselves), and their contents is between the opening and the closing tag.

You don't want <button name="THE CONTENT" />.

You want <button>THE CONTENT</button>

So in your case, you can just do this:

<button clickHandler = {this.buttonClickHandler}>x<sup>2</sup></button>

edited Jul 14 '19 at 12:46

answered Jul 14 '19 at 12:00

HeySora

846
7
19

yes.. doing it in this way only but it is not working.. – Ashok Gadri Jul 14 '19 at 12:06
@AshokGadri And why is it not working? Can you show examples? Errors? Screenshots? Edit your post and show what you've tried and what are the results. – HeySora Jul 14 '19 at 12:07
@AshokGadri Edit **YOUR OWN** post, not mine. Also add examples of your own code. – HeySora Jul 14 '19 at 12:12
Added the image and the code. – Ashok Gadri Jul 14 '19 at 12:34

How to show x power 2 (sup) in button element

1 Answers1