Add CSS classes along with js code in className attribute in HTML (React)
I'm new in writting JS in React so I'm having problems in adding my css clases "block lg:hidden". I tried to do it with parenthesis. The image shows the first line of code:
14 Replies
try adding a + between ) and the string
I don’t use React but maybe that should be something like this
Sorry, I am on the mobile and I can’t get the template literals to show up as the convert they mess with the code block.
I wanted to show a template literal at the beginning and end of the classname
Almost
I needed the backticks within brackets and dollar sign for each
But I wanted to know why
Is ok
Let's divide that line into two parts
In the code, you are doing
Here if you see, you are combining two strings without any ooperator (+, -, etc) between them.
So instead you need
So as @ἔρως already suggested, you just need to add a "+" between them.
which he did, in the most overly needlessly complicated way
In React, to use JavaScript within jsx you need the
${javascriptHere} so anything you want to reference that’s in JS needs to be within the brackets otherwise jsx doesn’t understand it. That’s how it was explained to me anyway.🤔
that's interesting
makes sense, react is weird af
that's not nessesory
you can pass parameters inside curly braces in html
like you can do
npm
classnames
A simple utility for conditionally joining classNames together. Latest version: 2.5.1, last published: 3 months ago. Start using classnames in your project by running
npm i classnames. There are 42745 other projects in the npm registry using classnames.you may find this useful
That works for props too right?
{true && "True!"}
This part
Yeah, when returning a jsx, you can put any js code (which returns a value) inside a curly bracket. It can be a prop, inner html, etc
JavaScript in JSX with Curly Braces – React
The library for web and native user interfaces
I really should have sent this before, mb