I am having problems with rendering the filter function. I think the problem is that I am not returning smth , but I am not so sure. I am using react and a json file to display data. this is the warning that I get on my console "react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.
Check the render method of SearchTable. See https://reactjs.org/link/warning-keys for more information.
at tr"
The code:
import data from "../data.json";
const SearchTable = () => {
const [searchTerm, setSearchTerm] = useState("");
return (
<div className="container">
<input
type="text"
placeholder="Search..."
className="form-control"
style ={{marginTop:50 ,marginBottom: 20, width : "40%"}}
onChange= {(e)=>{
setSearchTerm(e.target.value);
}}
/>
<table className="table table-bordered">
<thead className="thead-dark">
<tr>
<th>Number</th>
<th>PartitionId</th>
<th>enqueueTime</th>
</tr>
</thead>
<tbody>
{data.filter((val) => {
if(searchTerm === ""){
return val;
}
else if (
val.partitionId === searchTerm ||
val.enqueueTime === searchTerm
) {
console.log("hej")
return val;
}
}).map((m) => (
<tr key={m.id}>
<td>{m.Nr}</td>
<td>{m.partitionId}</td>
<td>{m.enqueueTime}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default SearchTable;```
If I were you, I would remove business logic from the template. What is more, the function that is passed to the filter method should return true if an entry should be placed in a filtered array or false otherwise. I put below the code with a generic filter function. One more thing, if the string is empty, there is no reason to call a filter on the array. If you don't want to filter, don't use CPU if you don't need to ;)
PS. you used non-existent object key when rendering the items. Change it either to Nr or partitionId.
PPS. We should change searched string to lower case as should entries within the data object.
Cheers! If you have any questions, I'm happy to answer them.
import data from "../data.json";
import React, { useState, useEffect } from 'react';
const SearchTable = () => {
const [searchTerm, setSearchTerm] = useState("");
const [filteredData, setFilteredData] = useState(data);
const filterData = () => {
if (searchTerm === '') {
setFilteredData(data);
return;
}
setFilteredData(data.filter(entry => {
return Object.keys(entry).some(entryKey => {
const entryValue = entry[entryKey].toString().toLocaleLowerCase();
return entryValue.contains(searchTerm);
})
}));
};
useEffect(filterData, [searchTerm]);
return (
<div className="container">
<input
type="text"
placeholder="Search..."
className="form-control"
style ={{marginTop:50 ,marginBottom: 20, width : "40%"}}
onChange= {(e)=>{
setSearchTerm(e.target.value.toLocaleLowerCase());
}}
/>
<table className="table table-bordered">
<thead className="thead-dark">
<tr>
<th>Number</th>
<th>PartitionId</th>
<th>enqueueTime</th>
</tr>
</thead>
<tbody>
{filteredData.map((m) => (
<tr key={m.Nr}>
<td>{m.Nr}</td>
<td>{m.partitionId}</td>
<td>{m.enqueueTime}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default SearchTable;