React Table if Array is empty, no render

Question

I have 4 arrays which get data from an API, then i render 4 tables with those arrays, the problem here is, if one of those arrays is empty ( no data on the backend ) all the tables wont render..

completedIssues: []
issuesNotCompletedInCurrentSprint: []
puntedIssues: []
issuesCompletedInAnotherSprint: []


const filteredIssuesCompletedInAnotherSprint = this.state.issuesCompletedInAnotherSprint.map(item => (
        {
            assignee: item ? item.assigneeName : 'Empty',
            id: item ? item.id : 'Empty',
            key: item ? item.key : 'Empty',
            type: item ? item.typeName : 'Empty',
            summary: item ? item.summary : 'Empty',
        }
    ));


<ResponseTable data={filteredCompletedIssues} />
<ResponseTable data={filteredIssuesNotCompletedInCurrentSprint} />
<ResponseTable data={filteredPuntedIssues} />
<ResponseTable data={filteredIssuesCompletedInAnotherSprint} />

ResponseTable It receives an array of objects and render the data into the table...

import React from 'react';
import ReactTable from 'react-table';
import "react-table/react-table.css";
 
export default class ResponseTable extends React.Component {

    constructor(props) { // Use Props
        super(props); // Use Props
        this.columnsBuilder = this.columnsBuilder.bind(this);

    }
    columnsBuilder () { //Remove data
        if(this.props.data == 0){
           return
        }
        const props = Object.keys(this.props.data[0]); //Use Props
        const columns = props.map( (item, index) => ({
            Header : item,
            accessor : item,
        }));

        const built = [
            {
                Header : this.props.header,
                columns,
            },
        ];        
        return built;
    }

        

    render() {


        return (
            <div>
                <ReactTable
                    data={this.props.data}
                    columns={this.columnsBuilder()} // Remove Props
                    defaultPageSize={10}
                    className="-striped -highlight"
                />
                <br />
            </div>
        );
    }
}

FIX ResponseTable columnsBuilder()

        if(this.props.data.length === 0) {
            return [{
                Header : this.props.header
            }];
        }

Answer 1

If you are using the npm module react-table

import ReactTable from 'react-table';
import "react-table/react-table.css";

then just set attribute minRows to 0 to tag ReactTable like as below code to stop rendering empty rows

<ReactTable data={tableDataArray} minRows={0} />

Answer 2

You can either do this in your parent container

{
  filteredCompletedIssues.length && <ResponseTable data={filteredCompletedIssues} />
}

OR you can do length check in your ResponseTable Component

render({data = []}) {

    if (!data.length) {
      return null;
    }

    return (

So your example would become:

import React from 'react';
import ReactTable from 'react-table';
import "react-table/react-table.css";
 
export default class ResponseTable extends React.Component {

    constructor(props) { // Use Props
        super(props); // Use Props
        this.columnsBuilder = this.columnsBuilder.bind(this);

    }
    columnsBuilder () { //Remove data
        if(this.props.data == 0){
           return
        }
        const props = Object.keys(this.props.data[0]); //Use Props
        const columns = props.map( (item, index) => ({
            Header : item,
            accessor : item,
        }));

        const built = [
            {
                Header : this.props.header,
                columns,
            },
        ];        
        return built;
    }

        

    render() {
        let { data = [] } = this.props;
        
        if(!data.length)
          return null;

        return (
            <div>
                <ReactTable
                    data={data}
                    columns={this.columnsBuilder()} // Remove Props
                    defaultPageSize={10}
                    className="-striped -highlight"
                />
                <br />
            </div>
        );
    }
}