# React and Codepen for Camper Leaderboard

**URL:** <https://forum.freecodecamp.org/t/react-and-codepen-for-camper-leaderboard/139783>\
**Category:** General\
**Created:** [August 3, 2017, 7:49am UTC](https://forum.freecodecamp.org/t/react-and-codepen-for-camper-leaderboard/139783 "2017-08-03T07:49:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![casinclair](https://avatars.discourse-cdn.com/v4/letter/c/f9ae1b/32.png) [@casinclair](https://forum.freecodecamp.org/u/casinclair)\
**Post date:** [August 3, 2017, 7:49am UTC](https://forum.freecodecamp.org/t/react-and-codepen-for-camper-leaderboard/139783/1 "2017-08-03T07:49:53Z")

</div>

I keep getting “unexpected token: \<”. Could someone explain why?

> **[Camper Leaderboard](https://codepen.io/csinclair/pen/rzLNjE?editors=0000)**
>
> ...

---

<div class="post-metadata">

**Author:** ![nr-mihaylov](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nr-mihaylov/32/60307_2.png) [@nr-mihaylov](https://forum.freecodecamp.org/u/nr-mihaylov)\
**Post date:** [August 3, 2017, 8:29am UTC](https://forum.freecodecamp.org/t/react-and-codepen-for-camper-leaderboard/139783/2 "2017-08-03T08:29:19Z")

</div>

You left side is a function call. You can’t assign to a function call. It makes no sense.

```javascript
this.toggleSort() = this.toggleSort.bind(this);

```

It should be like this:

```javascript
this.toggleSort = this.toggleSort.bind(this);

```

---

<div class="post-metadata">

**Author:** ![casinclair](https://avatars.discourse-cdn.com/v4/letter/c/f9ae1b/32.png) [@casinclair](https://forum.freecodecamp.org/u/casinclair)\
**Post date:** [August 3, 2017, 8:36am UTC](https://forum.freecodecamp.org/t/react-and-codepen-for-camper-leaderboard/139783/3 "2017-08-03T08:36:53Z")

</div>

Okay, thanks. I changed that, but I’m still getting the error.

---

<div class="post-metadata">

**Author:** ![Y-Taras](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/y-taras/32/161265_2.png) [@Y-Taras](https://forum.freecodecamp.org/u/Y-Taras)\
**Post date:** [August 3, 2017, 9:14am UTC](https://forum.freecodecamp.org/t/react-and-codepen-for-camper-leaderboard/139783/4 "2017-08-03T09:14:37Z")

</div>

You have to return only one element in render method. SO you need to wrap all in div or what ever. React 16 allows to return in render multiple elements but it is currently in beta. For example this will work fine

```
	    return (
			<div>
				<button onClick={this.toggleSort}>
					{" "}Sort By {this.state == "alltime" ? "Last 30 Days" : "All Time"}
					{" "}
				</button>
				<ul> {listItems}
				{" "}</ul>
			</div>
		);
```

---

<div class="post-metadata">

**Author:** ![casinclair](https://avatars.discourse-cdn.com/v4/letter/c/f9ae1b/32.png) [@casinclair](https://forum.freecodecamp.org/u/casinclair)\
**Post date:** [August 3, 2017, 9:18am UTC](https://forum.freecodecamp.org/t/react-and-codepen-for-camper-leaderboard/139783/5 "2017-08-03T09:18:04Z")

</div>

Oh! It works now. Thank you.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:46pm UTC](https://forum.freecodecamp.org/t/react-and-codepen-for-camper-leaderboard/139783/6 "2021-01-17T20:46:24Z")

</div>

Closed on January 17, 2021, 8:46pm UTC