[SOLVED] React adding conditional styling (&&)

Issue

the same newbie here.
I have the code which working as intended, all I want to do is add && with state variable (boolean) to make a text have line-through decoration while clicked (using crossedItemOnClick)

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Para(props) {
    const {id, className, info, state} = props;
    

    return (
        <p onClick={props.crossedItemOnClick} id={id} className={className} style={{textDecorationLine: 'line-through'}}>{info}</p>
    )
}

export default Para;

My whole page disappears if I change it to:

        <p onClick={props.crossedItemOnClick} id={id} className={className} style={state && {textDecorationLine: 'line-through'}}>{info}</p>

I’d love to know what I’m doing wrong and why the page completely disappears. And of course explanation to learn if you’d be kind to.
Much thanks!

Solution

Your approach is mostly correct, however, your condition should be applied on the style property directly like this if you want to use &&

style={{textDecorationLine: state && 'line-through'}}

Answered By – shehab shalan

Answer Checked By – Dawn Plyler (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published.