Correct way to handle conditional styling in React

Question

I m doing some React right now and I was wondering if there is a  correct  way to do conditional styling  In the tutorial they use  style      textDecoration  completed    line-through     none       I prefer not to use inline styling so I want to instead use a class to control conditional styling  How would one approach this in the React way of thinking  Or should I just use this inline styling way

User · Answer

Another way  using inline style and the spread operator   style         completed     textDecoration  completed             That way be useful in some situations where you want to add a bunch of properties at the same time base on the condition

User · Answer

First  I agree with you as a matter of style - I would also  and do also  conditionally apply classes rather than inline styles  But you can use the same technique    lt div className   completed    completed         gt  lt  div gt    For more complex sets of state  accumulate an array of classes and apply them   var classes        if  completed  classes push  completed    if  foo  classes push  foo    if  someComplicatedCondition  classes push  bar     return  lt div className   classes join        gt  lt  div gt

User · Answer

You can use somthing like this  render          var btnClass    btn       if  this state isPressed  btnClass      btn-pressed       else if  this state isHovered  btnClass      btn-over       return  lt button className  btnClass  gt  this props label  lt  button gt        Or  else  you can use classnames NPM package to make dynamic and conditional className props simpler to work with  especially more so than conditional string manipulation   classNames  foo    bar         gt   foo bar  classNames  foo     bar  true          gt   foo bar  classNames    foo-bar   true          gt   foo-bar  classNames    foo-bar   false          gt     classNames   foo  true      bar  true          gt   foo bar  classNames   foo  true  bar  true          gt   foo bar

User · Answer

I came across this question while trying to answer the same question  McCrohan s approach with the classes array  amp  join is solid   Through my experience  I have been working with a lot of legacy ruby code that is being converted to React and as we build the component s  up I find myself reaching out for both existing css classes and inline styles    example snippet inside a component       if failed  progress bar is red  otherwise green   lt div     className   progress-bar   failed   failed              style    width  this getPercentage         gt    Again  I find myself reaching out to legacy css code   packaging  it with the component and moving on    So  I really feel that it is a bit in the air as to what is  best  as that label will vary greatly depending on your project

User · Answer

The best way to handle styling is by using classes with set of css properties   example    lt Component className  this getColor      gt   getColor         let class    badge m2       class    this state count   0    warning    danger      return class

User · Answer

If you need to conditionally apply inline styles  apply all or nothing  then this notation also works   style   someCondition     textAlign  center   paddingTop   50            In case  someCondition  not fulfilled then you pass empty object

User · Answer

lt div style    visibility  this state driverDetails firstName    undefined   visible    hidden    gt  lt  div gt    Checkout the above code  That will do the trick

User · Answer

instead of this   style      textDecoration  completed    line-through     none       you could try the following using short circuiting   style      textDecoration  completed  amp  amp   line-through       https   codeburst io javascript-short-circuit-conditionals-bbc13ac3e9eb  key bit of information from the link   Short circuiting means that in JavaScript when we are evaluating an AND expression   amp  amp    if the first operand is false  JavaScript will short-circuit and not even look at the second operand   It s worth noting that this would return false if the first operand is false  so might have to consider how this would affect your style   The other solutions might be more best practice  but thought it would be worth sharing

User · Answer

If you prefer to use a class name  by all means use a class name   className  completed    text-strike    null    You may also find the classnames package helpful  With it  your code would look like this   className  classNames    text-strike   completed       There s no  correct  way to do conditional styling  Do whatever works best for you  For myself  I prefer to avoid inline styling and use classes in the manner just described   POSTSCRIPT  06-AUG-2019   Whilst it remains true that React is unopinionated about styling  these days I would recommend a CSS-in-JS solution  namely styled components or emotion  If you re new to React  stick to CSS classes or inline styles to begin with  But once you re comfortable with React I recommend adopting one of these libraries  I use them in every project

[javascript] Correct way to handle conditional styling in React

Examples related to javascript

Examples related to reactjs