Unexpected token '<' in my JS code...Where is it>

Question

I'm learning ReactJS on Codecademy and decided to take what I've learned there and make my own program. Unfortunately, I've had nothing but trouble. First my imports didn't work, then I was missing some commas, and now it has come up with "Syntax error: unexpected token < Line 38. This is where my div block is, but I can't figure out what's wrong. Code is below or follow this link to the code playground: https://code.sololearn.com/W414f7sA0CIs/#html
Thank you all so much in advance, I already have a feeling it's some stupid mistake.

var React = require('react');
var Component = React.Component;

var emojis = [
{
title: "You're feeling super happy! Go You!",
src: "https://socializzed.com/img/cms/tags/happy-emoji.gif"
},
{
title: "I think you're about to doze off. Go take a quick power nap.",
src: "https://socializzed.com/img/cms/tags/sleeping-emoji.gif"
},
{
title: "Wow, something's got you worked up. Why don't you take a few deep breaths or go for a walk.",
src: "https://socializzed.com/img/cms/tags/frustrated-emoji.gif"
},
{
title: "What's got you so upset? It'll all be better soon.",
src: "https://socializzed.com/img/cms/tags/tear-emoji.gif"
}
];

class Emoji extends
React.Component {
render () {
var emoji = prompt("Please enter a number from 1 to 4", "number");
if(emoji = 1) {
emoji = emojis[0];
} else if(emoji = 2) {
emoji = emojis[1];
} else if(emoji = 3) {
emoji = emojis[2];
} else {
emoji = emojis[3];
}

return(
<div>
<h1>{friend.title}</h1>
<img
src={friend.src}
/>
</div>
);
}

Answer 1

if you wish to use ReactJS in SoloLearn, you can make use of this template:

https://code.sololearn.com/Wi772Mr81mX8/?ref=app

make sure that all your React code is in the HTML tab and inside the <script> tag with the type of "text/babel"

the reason that the code doe not work is because you try to use JSX syntax in un-supported enviorement (the var React = require('react') does not work here)

you can use the regular React syntax instead of JSX, but that is just a waste of one of React's core advantages

also, inside your render return statement, there is no variable called "friend", my guess is you meant "emoji" :)

Answer 2

You almost do not have everything right in your code, the require method should not be used in the sololearn console because it will be displayed! and javascript is quite a different language, javascript is a web language, and java is a programming language and it should not be used in a document :)

Answer 3

missing a ";" after else if(emoji = 3) and at line 37 missing closing () after the return. hope that helps.

I believe the root of the issue is you have code after the return. most languages expect a termination point after a return for the current block of code. In you code after the return in js you have html, which also will not work here.

Answer 4

@James16 yeah originally I had used the regular import React... method like codecademy taught but it didn't accept it. As far as the Java syntaxing goes, idk why it's like that it's just how codecademy did it. This entire code is based off this lesson: https://www.codecademy.com/courses/react-101/lessons/react-components-advanced-jsx/exercises/render-function-calculations?action=lesson_resume&link_content_target=interstitial_undefined