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
Related
I want to dynamically call array values within rather than putting them as val1, .val2, .val3 as shown below.
<table>
<thead>
<tr>
{array_keys
.map((arr) => ( <th>{arr}</th> )
)}
</tr>
</thead>
<tbody>
{array
.map((list, key) =>
<tr key={key}>
<td>{list.val1}</td>
<td>{list.val2}</td>
<td>{list.val3}</td>
</tr>
)}
</tbody>
</table>
Above code works to get array keys in and array values in .
I want to fetch all values dynamically, something like:
<tbody>
{array
.map((list, key) =>
<tr key={key}>
{array_keys
.map((arr) => (
<td>{list.{arr}}</td>
)
)}
</tr>
)}
</tbody>
However {list.{arr}} is not an acceptable code in ReactJs. I need it because my array columns shall change, so I can't map static values and want them fetched dynamically in
I have the following piece of code which is causing the following warning message
react.development.js:220 Warning: Each child in a list should have a
unique "key" prop.
{data.map(item => (
<tr>
<td key={item.key}>{item.Number}</td>
<td key={item.key}>{item.Name}</td>
<td key={item.key}>{item.LastName}</td>
<td key={item.key}>{item.Reason}</td>
</tr>
))}
I have tried multiple different ways to get rid of the error to no avail. But still getting the following error. What can I do to get rid of the error?
EDIT:
I change it to the following and I no longer get the error.
{data.map((item, i) => (
<tr key={i}>
<td>{item.Number}</td>
<td>{item.Name}</td>
<td>{item.LastName}</td>
<td>{item.Reason}</td>
</tr>
))}
The key prop needs to be added to the top level element in the list, so in this case the tr element. It should contain a value from the item being mapped that uniquely identifies the item, so if item.key is defined and is unique to that list item this should do the trick:
{data.map(item => (
<tr key={item.key}>
<td>{item.Number}</td>
<td>{item.Name}</td>
<td>{item.LastName}</td>
<td>{item.Reason}</td>
</tr>
))}
Note, you should avoid using the index if possible as that may cause unexpected behaviour/performance problems. This is explained in the React documentation
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 have programatically created the above table in React using, the below code:
tableRenderer() {
let table = <Table striped bordered hover responsive="sm" id='mytable'>
<thead>
<tr>
{this.state.headers.map((header, index) =>
<th key={index}>{header} </th>
)}
</tr>
</thead>
{this.state.timeLabels.map((label, index)=>
<tr key={index}> <td><b>{label} </b></td>
{this.state.table.slice(0,4).map((match, index)=>
<td key={index}>{match.teamA} vs {match.teamB}</td>
)}
</tr> )}
</Table>;
However I'm stuck on the last piece of functionality I need: How can I change the value of the slice of the table array, so on the first run it slices 0->number of pitches, second run number of pitches-> number of pitches+number of pitches... etc.
Do I need to create some sot of function that will iterate a variable every time a row is created?
It would be something along the lines of:
{this.state.timeLabels.map((label, index)=> {
const NO_OF_PITCHES = 4;
let from = NO_OF_PITCHES * index;
let to = NO_OF_PITCHES * (index + 1);
return <tr key={index}>
<td><b>{label}</b></td>
{this.state.table.slice(from,to).map((match, index)=>
<td key={index}>{match.teamA} vs {match.teamB}</td>
)}
</tr>)}
}
that's assuming the slicing is
0,4...
4,8...
8,12...
etc
also you could lift NO_OF_PITCHES to the parent of the map function because it doesn't have to be recreated on each iteration
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>