React if-else failure


#1

In React I am changing the ‘status’ field which works, but only allows two possible options:

export default class FutureTaskSingle extends TrackerReact(Component) {

render() {
const checkBoxFlag = (moment(this.props.futuretask.start_date).startOf('minute')).isAfter(moment().startOf('minute')) ? 0 : 1;
    const futuretaskClass = (moment(this.props.futuretask.start_date).startOf('minute')).isAfter(moment().startOf('minute')) ? "" : "checked";

    const status = (moment(this.props.futuretask.start_date).startOf('minute')).isAfter(moment().startOf('minute')) ?
    <span className="noncompleted">TO DO</span> :
    <span className="completed">TEMP CHANGE GROUP</span>;

    return (
        <li className={futuretaskClass}>

            <input type="checkbox"
                   readOnly={true}
                   checked={checkBoxFlag}/>

           {status}            
            <hr></hr>
        </li>
        )
    }
}

But changing to if-else statement to allow for more cases for the ‘status’ fails?:

export default class FutureTaskSingle extends TrackerReact(Component) {

render() {
const checkBoxFlag = (moment(this.props.futuretask.start_date).startOf('minute')).isAfter(moment().startOf('minute')) ? 0 : 1;
const futuretaskClass = (moment(this.props.futuretask.start_date).startOf('minute')).isAfter(moment().startOf('minute')) ? "" : "checked";

    if ( (moment(this.props.futuretask.start_date).startOf('minute')).isAfter(moment().startOf('minute')) ) {
        const status =  <span className="noncompleted">TO DO</span> ;
    } else {
        const status = <span className="completed">TEMP CHANGE GROUP</span>;
    }

    return (
        <li className={futuretaskClass}>
            <input type="checkbox"
                   readOnly={true}
                   checked={checkBoxFlag}/>
            {this.props.futuretask.number}             
            {status}
            <hr></hr>
        </li>
        )
    }
}

No error messages, it just doesnt render?


#2

#3

Thanks shubbn but that is what I am following


#4

const status is scoped to the if block.


#5

As @lightpriest noted, const is block scoped. So you’d need to do:

let status;
if (moment(this.props.futuretask.start_date).startOf('minute')).isAfter(moment().startOf('minute')) ) {
  status = <span className="noncompleted">TO DO</span> ;
} else {
  status = <span className="completed">TEMP CHANGE GROUP</span>;
}

Also worth being aware of jsx-control-statements babel plugin which let’s you do things like:

<If condition={moment(this.props.futuretask.start_date).startOf('minute')).isAfter(moment().startOf('minute'))}>
  <span className="noncompleted">TO DO</span>
<Else />
  <span className="completed">TEMP CHANGE GROUP</span>
</If>