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> .....
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>
);
I have a simple table:
<Table bordered striped>
<thead>
<tr>
<th>Account</th>
<th>Status</th>
<th>Date</th>
<th>Requested By</th>
<th>Approved By</th>
<th></th>
</tr>
</thead>
<tbody>
{accountList?.map((account, index) => (
<tr>
<td>{account.name}</td>
<td>{account.status}</td>
<td>
{account.confirmDate == null
? ""
: moment(account.confirmDate).format("DD-MM-YYYY")}
</td>
<td>{account.requestedBy}</td>
<td>{account.approvedBy}</td>
<td style={{ width: 90 }} className={"text-center"}>
<FontAwesomeIcon
icon={faList}
onClick={() => showAccountModal(account)}
/>{" "}
{/* <FontAwesomeIcon
icon={faCreditCard}
onClick={()=>showBankModal(account)}
/> */}
</td>
</tr>
))}
</tbody>
</Table>
And then i Have a free text search box. I would like to filter all accounts, where name contains the search word. I could fairly easy just have to hooks/variables with the full result in one variable and the filtered in another and then swap between the two. But is there something smarter in REACT? Some kind of filter pipe like Angular? I want to do all filtering client side.
You can use array::filter and filter your state in-line right in the render logic.
({ name }) => !nameFilter || name.includes(nameFilter)
Returns true if the nameFilter is falsey ('', null, undefined, 0) and short-circuit the boolean expression and so will return all elements, otherwise will continue evaluating the expression and process name.includes(nameFilter).
Updated code
accountList?.filter(
({ name }) => !nameFilter || name.includes(nameFilter),
).map((account, index) => (...
If you are looking for an in-box solution use https://react-table.tanstack.com/docs/examples/filtering
But your approach is pretty simple: Store raw data (array) like the source of truth, filtered array store in local state.
Add a handler onChange to input something like this setFilteredData(raw.filter(el => el.name.includes(name)))
I am not sure how to correct this issue. I am using a unique ID but react still isn't happy. I tried to do it on each but then it complains about duplicates.
<table>
<tbody>
{!loading &&
products &&
products.map((product) => (
<>
<tr>
<td key={product._id}>{product.name}</td>
<td>
<span>
<strong>{product.desc}</strong>
</span>
</td>
</tr>
</>
))}
</tbody>
</table>
You must put the key in the upper most component: the Fragment. So instead of <> use <React.Fragment key={...}>
or instead of handling the key by yourself, maybe let React handle it for you. I find it pretty handy:
<table>
<tbody>
{
!loading && products && React.Children.toArray(
products.map((product) => (
<tr>
<td>{product.name}</td>
<td>
<span>
<strong>{product.desc}</strong>
</span>
</td>
</tr>
))
)
}
</tbody>
</table>
so you'll never have to worry about assigning keys anymore!
React.Children.toArray
Returns the children opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down.
Official documentation: https://reactjs.org/docs/react-api.html#reactchildrentoarray
Can you explain me why react show warning Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text.? I don't see any text inside tag tr
Code that renders table
export default class AllCarWashTable extends React.Component{
constructor(props) {
super(props);
this.generateHeaders = this.generateHeaders.bind(this);
this.generateRows = this.generateRows.bind(this);
};
static propTypes = {
cols : React.PropTypes.array.isRequired,
rows : React.PropTypes.array.isRequired
}
generateHeaders() {
let cols = this.props.cols; // [{key, label}]
return cols.map(function(colData) {
return <th key={colData.key}> {colData.label} </th>;
});
}
generateRows() {
let cols = this.props.cols, // [{key, label}]
data = this.props.rows;
if (this.props.rows.length > 0) {
return data.map(function(item) {
var cells = cols.map(function(colData) {
return <td key={colData.key}> {item[colData.key]} </td>;
});
return <tr key={item.id}> {cells} </tr>;
});
}
}
render(){
let headers = this.generateHeaders();
let rows = this.generateRows();
return (
<table className="table table-hove">
<thead>
<tr>
{headers}
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
)
}
}
At the end, my table has the following structure
Where is the problem?
The problem is the spaces in this line:
return <tr key={item.id}> {cells} </tr>;
It might seem silly, but you're actually rendering the cells and some whitespace (i.e. text). It should look like this:
return <tr key={item.id}>{cells}</tr>;
This will also happens when using logical AND short-circuit && to show/hide conditional rows:
{
foo && (<tr><td>{foo}</td></tr>)
}
change it to ternary a ? b : c form where c is null will fix it
{
foo ? (<tr><td>{foo}</td></tr>) : null
}
In my case where was an empty '' output (w\o space inside)
<tbody>
{this.props.orders.map(
order =>this.props.selectedAgent === order.agent ?
<Row item={order} key={ order._id } /> : ''
)
}
</tbody>
The null does the trick:
<tbody>
{this.props.orders.map(
order =>this.props.selectedAgent === order.agent ?
<Row item={order} key={ order._id } /> : null
)
}
</tbody>
The accepted answer wasn't the root cause in my case. I got the same warning when I had a comment after <th> tag. The warning went away when I removed the comment.
const TableHeaders = (props) => (
<tr>
<th>ID</th> {/* TODO: I had a comment like this */}
</tr>
)
EDIT: Removing the space between </th> and {/* will also do the trick.
A <tr> HTML tag indicates a table row. So, any text to be displayed inside a table row must be placed inside <td> HTML tag. This would remove the error.
Example:
return (
<tr>
<td> {/* Using <td> inside <tr> */}
Hello World!
</td>
</tr>
);
Notification warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>. Make sure you don't have any extra white space between tags on each line of your source code.
In my case, initialize variable should NOT is null.
let elementCart = ''; {/* in the here,warning will append */}
if(productsCart.length > 0){
elementCart = productsCart.map((item, index) => {
return <CartItem item={item} key={index} index={index} />
});
}
return(
<tbody id="my-cart-body">
{elementCart}
</tbody>
)
Solution: let elementCart = null;
Incase anyone else comes across this error or a similar whitespace error with Material UI in React, my solution after hours of breaking my code was a simple javascript comment inside of my table.
{ /* sortable here */ }
I removed that from between my table elements and the warning disappeared.
Make sure the let variables are valued otherwise initialize a new empty array.
{headers ? headers : []}
or
{rows || []}
For me it works like a charm ...
render(){
let headers = this.generateHeaders();
let rows = this.generateRows();
return (
<table className="table table-hove">
<thead>
<tr>
{headers ? headers : []}
</tr>
</thead>
<tbody>
{rows || []}
</tbody>
</table>
)
}
also || null can solve it.
the important is that the value is not ''
Kevin Law (from other comment) said that you can do this:
{
foo ? (<tr><td>{foo}</td></tr>) : null
}
But you can also fix it like this:
{
Boolean(foo) && <tr><td>{foo}</td></tr>
}
Removing the comment is what helped me too
in my case initialize a variable with null instead of "" works fine
In addition to #Jarno's answer, I also ran into this issue as well. Double check that you don't have any additional } or { at the end of your javascript code:
{this.props.headers.map(header => <th key={header}>{header}</th>)}}
↑
I received this warning when I had a parenthesis instead of a curly bracket
<table>
<tbody>
<tr>
(showMsg && <td>Hi</td>} // leading '(' should be a '{'
</td>
</tbody>
</table>
I received this warning when I put text inside <tr> element with no <td> elements. I wrapped my text with <td> elements and the warning disappeared.
When I did this, having a whitespace in my text or having used {} didn't matter.
In my case I indeed had a <tr> inside a <tr> (intended to use <td>) :)
It's very easy to find. Just open your inspect and look for tag. It should appear at the beginning or at the end of the tag a quoted string like this:
You shouldn't pass an unexpected element in the table body tag. You should use tr and td
In your rows would return the element with tr and td
{rows}
Something like
return(
<tr>
<td>
Hello
</td>
</tr>
)
For my situation, I was getting this error because I forgot to update a SQL query to include an updated column name. The original query was trying to access a column that didn't exist.
This query was being used with Nextjs, React, Material UI and sent to a PostgreSQL server in order to load up a MUI front-end table with database information from the table.
Updating the query fixed the issue.
I have an array with items and I want to make something like this:
<tr>
(until have items in array
<td></td><td></td>)
</tr>
But if I do that, I get an JSXTransformer error :
Adjacent XJS elements must be wrapped in an enclosing tag
Working version:
{rows.map(function (rowElement){
return (<tr key={trKey++}>
<td className='info' key={td1stKey++}>{rowElement.row[0].value}</td><td key={td2ndKey++}>{rowElement.row[0].count}</td>
<td className='info' key={td1stKey++}>{rowElement.row[1].value}</td><td key={td2ndKey++}>{rowElement.row[1].count}</td>
<td className='info' key={td1stKey++}>{rowElement.row[2].value}</td><td key={td2ndKey++}>{rowElement.row[2].count}</td>
<td className='info' key={td1stKey++}>{rowElement.row[3].value}</td><td key={td2ndKey++}>{rowElement.row[3].count}</td>
<td className='info' key={td1stKey++}>{rowElement.row[4].value}</td><td key={td2ndKey++}>{rowElement.row[4].count}</td>
.......
</tr>);
})}
I tried this one. But with <div> enclosing tag it doesn't work fine.
Answer here:
Uncaught Error: Invariant Violation: findComponentRoot(..., ...$110): Unable to find element. This probably means the DOM was unexpectedly mutated
<tbody>
{rows.map(function (rowElement){
return (<tr key={trKey++}>
{rowElement.row.map(function(ball){
console.log('trKey:'+trKey+' td1stKey'+td1stKey+' ball.value:'+ball.value+' td2ndKey:'+td2ndKey+' ball.count:'+ball.count);
return(<div key={divKey++}>
<td className='info' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
</div>);
})}
</tr>);
})}
</tbody>
Please, advise me how to properly wrap few TD tags!
I tried use a guide Dynamic Children, but JSXTransformer doesn't allow me do that.
The following error usually occurs when you are returning multiple elements without a wrapping element
Adjacent XJS elements must be wrapped in an enclosing tag
Like
return (
<li></li>
<li></li>
);
This doesn't work because you are effectively returning two results, you need to only ever be returning one DOM node (with or without children) like
return (
<ul>
<li></li>
<li></li>
</ul>
);
// or
return (<ul>
{items.map(function (item) {
return [<li></li>, <li></li>];
})}
</ul>);
For me to properly answer your question could you please provide a JSFiddle? I tried to guess what you're trying to do and heres a JSFiddle of it working.
When using the div as a wrapper its actually never rendered to the DOM (not sure why).
<tr data-reactid=".0.0.$1">
<td class="info" data-reactid=".0.0.$1.$0.0">1</td>
<td data-reactid=".0.0.$1.$0.1">2</td>
<td class="info" data-reactid=".0.0.$1.$1.0">1</td>
<td data-reactid=".0.0.$1.$1.1">2</td>
<td class="info" data-reactid=".0.0.$1.$2.0">1</td>
<td data-reactid=".0.0.$1.$2.1">2</td>
<td class="info" data-reactid=".0.0.$1.$3.0">1</td>
<td data-reactid=".0.0.$1.$3.1">2</td>
</tr>
EDIT: React 16+
Since React 16 you can now use fragments.
You would do it like this now
return <>
<li></li>
<li></li>
<>;
Or you can use <React.Fragment>, <> is shorthand for a HTML fragment, which basically is just a temporary parent element that acts as a container, once its appended to the document it no longer exists.
https://reactjs.org/docs/fragments.html
https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
So you have pairs of <td> elements which you want to return from a .map. The easiest way to do this is to just wrap them in an array.
<tr>
{data.map(function(x, i){
return [
<td>{x[0]}</td>,
<td>{x[1]}</td>
];
})}
</tr>
Don't forget the comma after the first </td>.
With the release of React 16, there is a new component called Fragment.
If are would like to return a collection of elements/components without having to wrap them in an enclosing element, you can use a Fragment like so:
import { Component, Fragment } from 'react';
class Foo extends Component {
render() {
return (
<Fragment>
<div>Hello</div
<div>Stack</div>
<div>Overflow</div>
</Fragment>
);
}
}
Here is how you will do it
<tbody>
{this.props.rows.map((row, i) =>
<tr key={i}>
{row.map((col, j) =>
<td key={j}>{col}</td>
)}
</tr>
)}
</tbody>