Search code examples
reactjsclassname

React classname definition

is there any difference between className = 'name' and className = {'name'} in React? I ofc know that you can use variables in {}, but my question is specifically to string in those brackets {''}. I tried to simulate this in code and it looks to me that are both the same. Can anyone confirm this?

Solution

  • There is no difference in both the notations if you are writing a single class name that is, className="name" is equal and the same as className={'name'}

    However, we use this {} notation when we want to give a conditional class. For example:

    <p className={this.state.hidden ? "hidden" : ""}>Hello World</p>

    The above line gives the <p> tag a class of hidden if the state variable hidden is set to true. We use the the curly braces {} in React when we want to write JavaScript code in the render function. We could use it for concatenation of two string class names or conditional class names.