2

I was trying to use the style tag in order to make the website I'm working for, much more mobile-friendly, however, the style tag was giving me errors

const styleCheck = () => {
        return (
            <div>
                <style>
                    Grid {
                        display: flex
                    }
                </style>
            </div>
        )
    }

The idea is that Grid is a different tag that I use later on, in the return value for the main function and hence I wanted to change it's location depending on whether the user is browsing in mobile mode or on a larger screen like a laptop.

However, the program is giving me error on the display:flex line. It states that }' expected and on the } right below the line it gives the error: Unexpected token. Did you mean {'}'} or &rbrace;?

I could, of course, give more code if necessary, but I'm curious as to the reasoning for this error in the style tag.

  • use a string for the content of the ` – tromgy Jun 15 '22 at 02:20
  • @tromgy would it be like Grid { 'width:10px', 'height:100px'} (I changed the inner value from display to width and height but my question doesn;t change here), aka under quotes and seperated by commas? – Saurav Chittal Jun 15 '22 at 03:35
  • No, what you need is to enclose everything: `` – tromgy Jun 15 '22 at 11:28
  • @tromgy I see, thank you so much. Is there a reason that works like that because most of the guides I saw remove the {''} – Saurav Chittal Jun 15 '22 at 13:27
  • 1
    What happens here is that the content of the ` – tromgy Jun 15 '22 at 13:42

0 Answers0