React adding conditional styling (&&)-CodePudding

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!

CodePudding user response：

style attribute takes object as value in react. Correct way will be:

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

assuming you have to apply the style when state is true.

CodePudding user response：

That is because style prop expect object of type CSSProperties, and in case when your condition is false you will end up with something like style={false} which will cause your app to crash since you provided HTML element with invalid styling.

Easiest solution is to just rewrite that part to style={state ? {...someStyle} : {}}

CodePudding user response：

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'}}