Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React JSX error trying to use Less Than Symbol

I am trying to make a simple button with an arrow point to the left, so I figured I would use the "<". However when I do

<button><</button>

am I getting an unexpected token error I guess because it thinks I am starting a new element rather than just wanting the < to be the text in the button. Is there anyway around this? Replacing < with "test" compiles and works fine.

like image 662
WebbH Avatar asked May 13 '17 20:05

WebbH


People also ask

What is ${} in JSX?

You use ${} in string templates like const k = `my name is ${name}` you use {} whenever you want to put some Java code in your JSX code like <div attr={name}>{name}</div>

How do I fix JSX expressions must have one parent element?

The React. js error "JSX expressions must have one parent element" occurs when a component returns multiple elements. To solve the error, wrap the elements in a parent div element or use a fragment, e.g. <><h2>One</h2><h2>Two</h2></> .

What attributes can I not write in JSX?

You can't write inlines styles in JSX. You have to reference an object in scope or pass an object that contains CSS properties, written as JS properties. JavaScript values can be injected into JSX using {} (e.g., test={text} and data-test={tested? 'test':'false'} ).


3 Answers

Use the HTML code for less than.

    <button>&lt;</button>
like image 83
Jerhemy Avatar answered Oct 06 '22 00:10

Jerhemy


HTML entities work; alternatively, you can use braces to interpolate that string in plain JS:

<button>{"<"}</button>

It’s worth noting that in cases where the button text doesn’t tell the user what it does, you should include an aria-label attribute with a description:

<button aria-label="back">{"<"}</button>

This makes your site more accessible by allowing folks with screen readers or similar to easily understand how to interact with it.

like image 25
jonrsharpe Avatar answered Oct 06 '22 00:10

jonrsharpe


Use HTML entities (https://dev.w3.org/html5/html-author/charref).

&lt; for less than.

like image 22
Roope Avatar answered Oct 05 '22 23:10

Roope