Insert CSS line in React code

Question

this is my code :

{
        delay > 0
        ? <strong className="history__late"> {delayDayConst}j {delayHourConst}h {delayMin}m <FormattedMessage {...globalMessages.inProgressAndLate} />
         </strong>
        : delay < 0 
        ? <span className="history__advance"> - {delayDayConst}j {delayHourConst}h {delayMin}m <FormattedMessage {...globalMessages.inProgressAndAhead} /></span>
        : <span className="history__break"><FormattedMessage {...globalMessages.break} /></span> 
 }

I only want to insert a CSS line on my condition, this CSS line point to another element not present in the function. I try some of things but no found a solution.

PS: sorry for my bad englsih.

@Harikrishnan When delay > 0, I want to change the color of another element in my page, so point the CSS of that element. — Alessio Cammarata
– Alessio Cammarata, Commented Jul 12, 2018 at 12:29

Harikrishnan · Accepted Answer · 2018-07-12 12:53:09Z

1

You can use state for css class.Refer the following example.Here i consider the delay is passed as props

class App extends React.Component {
  constructor({ props }) {
    super(props);
    this.state = {
        class:'class1'
    };
  }
 componentWillMount() {
       if(this.props.delay >0 )
         { 
            this.setState({class:class1})
         }
       else {
                this.setState({class:class2})
            }
   }
  render() {
    return  <div><p className={this.state.class}>hello</p></div>; // replace with your condition
  }
}

edited Jul 12, 2018 at 12:53

answered Jul 12, 2018 at 12:44

Harikrishnan

1,0978 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Insert CSS line in React code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related