I'm trying to figure out how I can use an if statement within my state component to determine if an element should be displayed based on if the object has values. Should logic exist in a separate prop component?

The "If statement" I'm trying to use:

if(props.files){
  return ( <button className={ this.state.fileLinksButtonClosed ? "record-footer__accordion-button record-footer__file-links-button--closed" : "record-footer__accordion-button record-footer__file-links-button--opened"} onClick={this.handleClick}>File Attachments ({this.props.files.length})</button>
} else {
  return null;
}

Current component:

//Record - Footer - File Link Accordion
class RecordFilesAccordion extends React.Component {
    constructor(props){
        super(props);
        this.state = { 
            fileLinksHidden: true,
            fileLinksButtonClosed: true
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(){
        this.setState({ 
            fileLinksHidden: !this.state.fileLinksHidden,
            fileLinksButtonClosed: !this.state.fileLinksButtonClosed
        });
    }

    render() {
        return (
            <div className="annotation-file">
                <button className={ this.state.fileLinksButtonClosed ? "record-footer__accordion-button record-footer__file-links-button--closed" : "record-footer__accordion-button record-footer__file-links-button--opened"} onClick={this.handleClick}>File Attachments ({this.props.files.length})</button>
                { this.state.fileLinksHidden ? null : <RecordFiles files={this.props.files}/> }
            </div>
        );
    }
}

I'm trying to figure out how I can use an if statement within my state component to determine if an element should be displayed based on if the object has values. Should logic exist in a separate prop component?

The "If statement" I'm trying to use:

if(props.files){
  return ( <button className={ this.state.fileLinksButtonClosed ? "record-footer__accordion-button record-footer__file-links-button--closed" : "record-footer__accordion-button record-footer__file-links-button--opened"} onClick={this.handleClick}>File Attachments ({this.props.files.length})</button>
} else {
  return null;
}

Current component:

//Record - Footer - File Link Accordion
class RecordFilesAccordion extends React.Component {
    constructor(props){
        super(props);
        this.state = { 
            fileLinksHidden: true,
            fileLinksButtonClosed: true
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(){
        this.setState({ 
            fileLinksHidden: !this.state.fileLinksHidden,
            fileLinksButtonClosed: !this.state.fileLinksButtonClosed
        });
    }

    render() {
        return (
            <div className="annotation-file">
                <button className={ this.state.fileLinksButtonClosed ? "record-footer__accordion-button record-footer__file-links-button--closed" : "record-footer__accordion-button record-footer__file-links-button--opened"} onClick={this.handleClick}>File Attachments ({this.props.files.length})</button>
                { this.state.fileLinksHidden ? null : <RecordFiles files={this.props.files}/> }
            </div>
        );
    }
}

• javascript
• reactjs

1 Answer 1

If you want to check whether your object has any values or is empty you can use

if(Object.keys(props.files).length>0)

as the condition. This will be true if props.files is an array with at least 1 element or an object with at lease 1 field.

EDIT (after comment from @cphill): I think your render method should be

 render() {
        return (
            <div className="annotation-file">
               {Object.keys(props.files).length>0?
                <button className={ this.state.fileLinksButtonClosed ? "record-footer__accordion-button record-footer__file-links-button--closed" : "record-footer__accordion-button record-footer__file-links-button--opened"} onClick={this.handleClick}>File Attachments ({this.props.files.length})</button>
                : null}
                { this.state.fileLinksHidden ? null : <RecordFiles files={this.props.files}/> }
            </div>
        );
    }