How can I comment within my JS file? Using HTML syntax errors and JS erros?

Question

if I put // to tell the JS compiler that I want to make a comment it renders it however if I place the html syntax it errors and says Parsing

if I used HTML syntax it says Failed to Compile when I use JS it displays text

Here is my Join.js file

import React,{ useState} from 'react';
import {Link} from "react-router-dom";//Link to our /chat path

/*importing my styles*/
import './Join.css';


export default function SignIn() {
    //I must always declare hooks within function based
    //component and no where else
    //first element in index is the nameof the variable and the second is the setter func
    //name is a state and setName is a function that is the setter of the state
    //I am passing the name Stage an empty string 
    const [name, setName] = useState('');

    //State #2
    const [room, setRoom] = useState('');


    return (
        <div className="joinOuterContainer">
            <div className="joinInnerContainer">
                <h1 className="heading">Join</h1>
                // OnChange Handler: logic of the component happens. When the user types sth in the textbox
                //An Event will be raised
            
                return(
                <div>
                    <input placeholder="Name" className="joinInput" type="text" onChange={(event) => setName(event.target.value)}/>
                </div>
                <div>
                    <input placeholder="Room" className="joinInput mt-20" type="text" onChange={(event) => setRoom(event.target.value)}/>
                </div>
                
                {/*Link will lead us to chat but we have to pass in parameters thanks to the question mark
                Prevent the user from logging in if the input validatio usrename and pass are wrong since this will break out app*/}
                
                {/*Raise the event only if the condition is met*/}
                <Link onClick={e => (!name || !room) ? e.preventDefault() : null} to={`/chat?name=${name}&room=${room}`}>
                    <button className="button mt-20" type="submit">Sign In 968 6342 56837</button>
                    
                </Link>
            </div>
        </div>
    );
}

I don't know React, but I don't think you are allowed to just drop HTML code within the JavaScript. You need to quote it as a string or use a template literal. — Scott Marcus, Aug 25 '20 at 01:20
@ScottMarcus this is not HTML, it's JSX, which is valid in a React project as long as it is configured correctly to transpile to vanilla JS. Though the comment syntax is incorrect in OP's JSX code. — Emile Bergeron, Aug 25 '20 at 01:23

score 2 · Accepted Answer · answered Aug 25 '20 at 01:24

2

You can add comments in jsx using: {}

e.g.

export default function SignIn() {
    return <div>
       {
          // woohoo! 
       }
       {/* oooooh ya */}
    </div>
}

answered Aug 25 '20 at 01:24

brando

598
6
11

How can I comment within my JS file? Using HTML syntax errors and JS erros?

1 Answers1