Dynamically add classes to react component

Question

I have the following react component

const style = {
    "border":"2px solid grey",
    "margin-bottom":"2px",
    "list-style":"none",
    "text-align":"center"
}

const isDoneStyle = {
    "text-decoration":"line-through"
}

export default function Todo({name,isComplete,date}) {

    return (
    <li style={}>
        <p>Task: {name}</p>
        <input type="checkbox" defaultChecked={isComplete}/>
        <p>{date}</p>
    </li>
    );
}

All the li's should have the style class, but only when isComplete is true it should have the isDoneStyle added. How can I achieve this?

Hi Boris, just wrote you a solution below, let me know if that helps. — Cat_Enthusiast
– Cat_Enthusiast, Commented Sep 2, 2019 at 8:34
Hi Boris, I've wrote a solution which is based on defining a function which will calculate the style base on the prop. Have you tried it? — Maciej Trojniarz
– Maciej Trojniarz, Commented Sep 2, 2019 at 8:37

Cat_Enthusiast · Accepted Answer · 2019-09-02 08:28:31Z

1

Note that style attributes in React need to be camel-case.

const style = {
    border:"2px solid grey",
    marginBottom:"2px",
    listStyle:"none",
    textAlign:"center"
}

const isDoneStyle = {
    textDecoration:"line-through"
}

You can use a ternary operator to decide what style object to use. Additionally, you can use the spread operator, to combine the properties of the objects you want to use into a single object.

<li style={ isComplete ? {...style, ...isDoneStyle} : {...style} }>
    <p>Task: {name}</p>
    <input type="checkbox" defaultChecked={isComplete}/>
    <p>{date}</p>
</li>

answered Sep 2, 2019 at 8:28

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Boris Grunwald Over a year ago

Thank you. The style actually still works even though I don't use camel case.

Boris Grunwald Over a year ago

I am using nextJs, maybe that is why?

Cat_Enthusiast Over a year ago

@BorisGrunwald that explains alot haha. That's awesome. Did the above work for you?

Cat_Enthusiast Over a year ago

@BorisGrunwald great! For the record, I think it would make more sense to create a class in your style sheet instead though and refer to that class conditionally. It's just cleaner overall. Please do consider upvoting and marking this as the answer as well :)

Maciej Trojniarz · Accepted Answer · 2019-09-02 08:31:59Z

0

You can use function to define those styles

const style = {
    "border":"2px solid grey",
    "margin-bottom":"2px",
    "list-style":"none",
    "text-align":"center"
}

const isDoneStyle = {
    "text-decoration":"line-through"
}

const getStyle = isComplete => isComplete ? {...style, ...isDoneStyle} : style

export default function Todo({name,isComplete,date}) {
    return (
    <li style={getStyle(isComplete)}>
        <p>Task: {name}</p>
        <input type="checkbox" defaultChecked={isComplete}/>
        <p>{date}</p>
    </li>
    );
}

answered Sep 2, 2019 at 8:31

Maciej Trojniarz

7325 silver badges15 bronze badges

Comments

Bear · Accepted Answer · 2019-09-02 08:45:04Z

If any of above won't fulfil your requirements think about using classes instead of injecting styling directly into component. I strongly recommend using library called classnames which is designed for resolving problem like yours. I successfully used this library in many projects and it was always the best solution. Your example would like like:

CSS:

.main-layout {
    "border":"2px solid grey",
    "margin-bottom":"2px",
    "list-style":"none",
    "text-align":"center"
}

.done-layout {
    "text-decoration":"line-through"
}

React:

export default function Todo({name,isComplete,date}) {
return (
<li className={
    classNames({
       main-layout: true,
       done-layout: isComplete
    }
>
    <p>Task: {name}</p>
    <input type="checkbox" defaultChecked={isComplete}/>
    <p>{date}</p>
</li>
);
}

If you doesn't like this approach - don't worry. classNames allows you to choose one of few different ways of dynamic styles switching.

Collectives™ on Stack Overflow

Dynamically add classes to react component

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related