How to selectively render react table components? - reactjs

Question

In the given code snippet I dont want to render the component if the heading is equal to _id but the following conditional rendering results in no rendering at all (empty table). What conditional statement should I use?
return <table className='paleBlueRows' cellPadding= {11} cellSpacing={11}>
<thead>
<tr>{data[0] && columns.map((heading) => {
if(heading!=='_id') <th>{heading}</th>
})}</tr> .....

Answer 1

You can use Array.filter() to filter out the heading before mapping, or you can return null or false which React will ignore. Note that returning undefined (which is the same as not returning anything from a function) is not valid, and will cause React to emit a warning.
So, either:
return (
<table className="paleBlueRows" cellPadding={11} cellSpacing={11}>
<thead>
<tr>
{data[0] &&
columns
.filter((heading) => heading !== "_id")
.map((heading) => {
return <th>{heading}</th>;
})}
</tr>
</thead>
</table>
);
Or:
return (
<table className="paleBlueRows" cellPadding={11} cellSpacing={11}>
<thead>
<tr>
{data[0] &&
columns
.filter((heading) => heading !== "_id")
.map((heading) => {
if (heading === "_id") return null;
return <th>{heading}</th>;
})}
</tr>
</thead>
</table>
);
Since you're rendering a list (with .map()), make sure you set the key of the element which you return from it. I don't know if columns can contain duplicate values, or anything else about its nature, so I can't make a precise suggestion. If columns contains no duplicate values, just set its value as the key so React knows which elements it needs to update if columns changes between renders.
return (
<table className="paleBlueRows" cellPadding={11} cellSpacing={11}>
<thead>
<tr>
{data[0] &&
columns
.filter((heading) => heading !== "_id")
.map((heading) => {
return <th key={heading}>{heading}</th>;
})}
</tr>
</thead>
</table>
);