2

I was learning React and and wanted to pass className props to a component and would like to know the difference between className={'container'} and className='container' and which one is correct to be used.

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Sukich
  • 139
  • 1
  • 8
  • 2
    Both of them are correct. First one you would use generally when you want to dynamically resolve the classname – Shubham Khatri Dec 23 '19 at 06:22
  • 1. for multiple class, and 2nd for one class. Read this - https://stackoverflow.com/q/34521797/2845389 – Kaushik Dec 23 '19 at 06:22
  • Does this answer your question? [React: is there a different between using curly brackets and omitting them?](https://stackoverflow.com/questions/39475986/react-is-there-a-different-between-using-curly-brackets-and-omitting-them) – Emile Bergeron Dec 23 '19 at 06:27

2 Answers2

1

With your example className={'container'} and className='container' both does the same there is no difference.

classname={something}

where something will be a variable containing class name. Is used for dynamic or condition based assignment of class.

example:

classname={(ifsomething)?'red':'blue'}

className='something'

This is a normal direct assignment of class with its name.

example:

classname='red'
Nandan
  • 172
  • 8
1

In your case both are same, but below is the logic when to use what :

So you would like to use className={'container'} when suppose there is a condition and you are setting the name of class to a variable. Like classValue = isError?'error':'noterror' and then className = {classValue}

Now you want to use className='container' when you directly want to assign a className.

Hope it helps. feel free for doubts

Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45