Question 161544 in Javascript Question posted in
A very good W3school tutorial can be found here.

“Troubleshoot Javascript-React issues with JSX?”

I’m having some issues using react.
When I’m trying to write something like:

import React, { useState } from 'react';

function Navbar() {
    <>
    nav.navbar
    </>;
}

I cant seem to get the jsx typing to work
What am I missing? normally this should have turned into:

<nav className=navbar></nav>

but its not doing anything.

Can anyone help me with this?

I tried installing some extensions that should support it, reinstall node and stuff

Tags:

3

Answers


  1. 0

    No it will not automatically show. You are confusing it with emmet. That will show in editor if you are using emmet. Otherwise you have to write it. Update the code like this:-

    import React, { useState } from 'react';

function Navbar() {
    return (
        <>
           <nav classname="navbar"></nav>
        </>
    );
}

export default Navbar;
    Login or Signup to reply.
  2. 0

    In your Visual Studio Code, go to Settings and search for emmet.

    In the results, you will find a tab that reads:

    Emmet: Include Languages
    Enable Emmet abbreviations in languages that are not supported by default. Add a mapping here between the language and Emmet supported language. For example: {"vue-html": "html", "javascript": "javascriptreact"}

    There, you should add in the list the items from the description above, as such:

    Item Value
    javascript javascriptreact
    vue-html html

    You can also achieve this by editing your settings.json file directly and adding this:

    "emmet.includeLanguages": {
  "vue-html": "html",
  "javascript": "javascriptreact"
}
    Login or Signup to reply.
  3. 0

    You are trying to use a tool called Emmet, this allows you to enter abbreviations which are then auto expanded to the desired code.

    As it is not working it would seem that Emmet is either not installed, or not configured for you code editor.

    You will need to download, install and configure it before the abbreviations will work.

    You haven’t mentioned which editor you are using so the best advice we can give is to go to the Emmet homepage, where it will show if it is available for your editor and how to get it working.

    https://emmet.io/

    Alternatively, the code editors website will likely have the same information available as Emmet is widely used.

    VSCode is probably the most commonly used editor right now, it comes with Emmet preinstalled but you need to update the configuration to use Emmet in jsx or tsx files.

    In settings, search for Emmet and then in the Include Languages section add:

    key value
    javascript javascriptreact
    typescript typescriptreact
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search