Develop Reference

Cannot update a component (`TableComponent`) while rendering a different component (`EditComp`). How can i fix this?

I got an error. react-dom.development.js:86 Warning: Cannot update a component (TableComponent) while rendering a different component (EditComp). To locate the bad setState() call inside EditComp, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
at EditComp (http://localhost:3000/static/js/bundle.js:10830:5).
How can i fix this?
My EditComp component
function EditComp({ id, idItem, Edit, editingText, submitEdits, setIdItem, handleEditing, item, style, classBull}) {
return (
<>
{
id === idItem ?
<Fragment>
<td className={classBull(id)}
><input
className={style}
onChange={Edit}
value={editingText}
type="text" /></td>
<td> <button
onClick={() => submitEdits(item)}
>Edit</button></td>
<td> <img onClick={() => setIdItem(null)} src={cansel} alt="cancel" /></td>
</Fragment>
: <th onDoubleClick={() => handleEditing(id)}>{item.text}</th>
}
</>
)
}
My parent component
function TableComponent({ table, removeItem, setTable }) {
const [editingText, setEditingText] = useState("");
const [idItem, setIdItem] = useState(null);
const [style, setStyle] = useState('null');
const [currentItem, setCurrentItem] = useState(null);
const styleActive = () => {
setStyle('table_data_active');
}
const classBull = (id) => {
if (id === idItem) {
return setStyle('table_data_active');;
} else {
return 'table_item'
}
}
const handleEditing = (id) => {
setIdItem(id);
}
const Edit = (e) => {
setEditingText(e.currentTarget.value);
}
const submitEdits = (item) => {
axios.patch(`http://localhost:3004/item/${item.id}`, { text: editingText })
setIdItem(null);
setEditingText('')
}
return (
<thead>
{
table.map((item, id) => {
return (
<tr
onDragStart={(e) => dragStartHandler(e, item)}
onDragLeave={(e) => dragEndHandler(e)}
onDragEnd={(e) => dragEndHandler(e)}
onDragOver={(e) => dragOVerHandler(e)}
onDrop={(e) => dragHandler(e, item)}
draggable={true}
key={item.id}>
<DataItem
styleActive={styleActive}
table={table}
style={style}
idItem={idItem}
handleEditing={handleEditing}
item={item} id={id} />
<EditComp
classBull={classBull}
style={style}
item={item}
handleEditing={handleEditing}
setIdItem={setIdItem}
submitEdits={submitEdits}
editingText={editingText}
Edit={Edit}
id={id}
idItem={idItem} />
<RemoveItem
id={id}
items={item}
removeItem={removeItem} />
</tr>
)
})
}
</thead>
)
}

Filter products on enter Search input ReactJS

I have list of products. I want to display only products that have a description or name containing typed word by clicking enter on search input.
So I tried this in my Search component
const Search = (props) => {
return (
<InputGroup className="container custom-input-group">
<FontAwesomeIcon icon={faSearch} className="icon" />
<FormControl
placeholder="Search"
type="text"
className="mr-sm-2"
onChange={(e) => props.onSearch(e.target.value)}
value={props.value}
/>
</InputGroup>
);
};
And this in my Appcomponent
const App = (props) => {
const [cartProducts, setCartProducts] = useState([]);
const [products, setProducts] = useState(getProducts());
const [searchValue, setSearchValue] = useState();
const handleAddProductToCart = (productID) => {
console.log(productID);
setCartProducts([...cartProducts, productID]);
};
const handleRemoveFromCart = (productID) => {
const newCartProducts = cartProducts.filter((id) => id !== productID);
setCartProducts(newCartProducts);
};
const filterItems = ({ description, title }) => {
return title.toLocaleLowerCase().indexOf(searchValue.toLocaleLowerCase())
|| description.toLocaleLowerCase().indexOf(searchValue.toLocaleLowerCase())
}
return (
<>
<Header />
<Search onSearch={setSearchValue} value={searchValue} />
{products.filter(filterItems).map((product, id) => (
<Product key={product.id} {...product}/>
))}
<Sidebar />
{products.map((product) => {
const { id } = product;
let haveInCart = false;
cartProducts.forEach((productID) => {
if (productID === id) {
haveInCart = true;
}
});
return (
<Product
key={product.id}
product={product}
handleAddProductToCart={handleAddProductToCart}
/>
);
})}
<h2>Your Cart</h2>
{cartProducts.length > 0
? cartProducts.map((productID) => {
const productIndex = products.findIndex((product) => {
return product.id === productID;
});
let product = products[productIndex];
return (
<CartProduct
key={product.id}
product={product}
handleRemoveFromCart={handleRemoveFromCart}
haveInCart={true}
/>
);
})
: "Yor Cart is Empty :("}
</>
);
};
It's giving me SyntaxError. What am I doing wrong?
Code sandbox
https://codesandbox.io/s/cat-toys-n23m6?file=/src/App.jsx:275-2222
EDIT I found I was missing ))} but it's still not working

Add an empty tag in your map function
{
products.filter(filterItems).map((product, id) => (
<> {/* here */}
<Product key={product.id} {...product}/>
<Sidebar />
{
products.map((product) => {
const { id } = product;
let haveInCart = false;
cartProducts.forEach((productID) => {
if (productID === id) {
haveInCart = true;
}
});
return (
<Product
key={product.id}
product={product}
handleAddProductToCart={handleAddProductToCart}
/>
);
})
}
</> {/* here */}
))}
EDIT
I have made changes to your code. Now it's your turn ;)
Demo: stackblitz

I forked your sandbox. Here's the code
return (
<>
<Header />
<Search onSearch={setSearchValue} value={searchValue} />
{products.filter(filterItems).map((product, id) => (
<div>
<Product key={product.id} {...product} />
<Sidebar />
{products.map((product) => {
const { id } = product;
let haveInCart = false;
cartProducts.forEach((productID) => {
if (productID === id) {
haveInCart = true;
}
});
return (
<Product
key={product.id}
product={product}
handleAddProductToCart={handleAddProductToCart}
/>
);
})}
<h2>Your Cart</h2>
{cartProducts.length > 0
? cartProducts.map((productID) => {
const productIndex = products.findIndex((product) => {
return product.id === productID;
});
let product = products[productIndex];
return (
<CartProduct
key={product.id}
product={product}
handleRemoveFromCart={handleRemoveFromCart}
haveInCart={true}
/>
);
})
: "Yor Cart is Empty :("}
</div>
))}
</>
);

How to add these elements in array to customize the code in reactjs

I have written the code with lots of if else logics. I am trying to improve my code. Can anyone suggest me some better options. I am trying to print data based on conditions:
functionOne and secondFunction are the methods which will return the component at multiple places.
Gist of my code is: if length of myFirstDataArray is greater than 3, than print the secondFunction value , or else, check again the length of myFirstDataArray and so on.
const functionOne = (data) => {
return (
<SummaryOfValues
data={data}
></SummaryOfValues>
);
};
const secondFunction = (data) => {
return (
<ListOfValues
data={data.info}
></ListOfValues>
);
};
{
myFirstDataArray && myFirstDataArray.length >= 3 ? (
<>
<>
{resultedDataArray
.slice(0, 3)
.map((data: any) => ({ secondFunction(data); }))}
</>
</>
) : (
<>
<>
{resultedDataArray
.slice(0, resultedDataArray.length)
.map((data: any) => ({ secondFunction(data); }))}
</>
{myFirstDataArray && myFirstDataArray.length === 1 ? (
<>
{resultedDataArray
.slice(myFirstDataArray.length)
.map((data: any) => ({ functionOne(data); }))}
</>
) : null}
{myFirstDataArray && myFirstDataArray.length === 2 ? (
<>
{resultedDataArray
.slice(myFirstDataArray.length, myFirstDataArray.length + 1)
.map((data: any) => ({ functionOne(data); }))}
</>
) : null}
</>
);
}

How do you think of this solution?
const functionOne = (data) => {
return (
<SummaryOfValues
data={data}
></SummaryOfValues>
);
};
const secondFunction = (data) => {
return (
<ListOfValues
data={data.info}
></ListOfValues>
);
};
{
myFirstDataArray && myFirstDataArray.length > 0 (
<>
<>
{resultedDataArray
.slice(0, 3)
.map((data: any) => ({ secondFunction(data); }))}
</>
{myFirstDataArray.length < 3 ? (
<>
{resultedDataArray
.slice(myFirstDataArray.length - 1)
.map((data: any) => ({ functionOne(data); }))}
</>
) : null}
</>
);
}

TypeError: props.pagination is undefined

I am trying to get page data which is coming from redux store and pass this to local state named pagination. This pagination state is further passed to child component. But the Problem is whenever i try to pass redux state to local state i get error undefined. Here data is defined I can console.log the data but it gets delayed that why i might be getting the error. I don't know how to solve this. I am using react functional component.
newOrder.js
const [pagination, setPagination] = React.useState({});
const DataReceived = (state) =>
state.OrderAndShipping.NewOrderList.newOrder._embedded;
const selectedData = useSelector(DataReceived, shallowEqual);
const NewOrder = selectedData ? selectedData.customerOrderResourceList : null;
const pageState = (state) =>
state.OrderAndShipping.NewOrderList.newOrder.page;
const selectPage = useSelector(pageState);
console.log("page", selectPage);
React.useEffect(() => {
const access_token = localStorage.getItem("access_token");
props.getNewOrderList(access_token, "", ""); <-- redux dispatch function
}, []);
React.useEffect(() => {
setPagination(selectPage); <-- Here i am trying to pass redux state to localstate.
}, []);
const mapStateProps = (state) => {
console.log(state);
return {
newOrder: state.OrderAndShipping.NewOrderList.newOrder
? state.OrderAndShipping.NewOrderList.newOrder._embedded
: null,
};
};
const mapDispatchToProps = {
getNewOrderList, <-- Dispatching function
};
Passing
{TableData && TableData.rows && TableData.rows.length > 0 && (
<Table
_handleCheckbox={_handleCheckbox}
_handlePagination={_handlePagination}
_handleUserCheckBox={_handleUserCheckBox}
data={TableData}
pagination={pagination}
/>
)}
Table.js
const emptyRows =
rowsPerPage -
Math.min(
rowsPerPage,
props.data.rows.length - props.pagination.number * rowsPerPage
);
const { number } = props.pagination;
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<EnhancedTableToolbar numSelected={selected.length} data={props.data} />
<div className={classes.tableWrapper}>
<Table
className={classes.table}
aria-labelledby="tableTitle"
size={dense ? "small" : "medium"}
>
{/*//! Table Head Component */}
<EnhancedTableHead
numSelected={selected.length}
order={order}
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={props.data.rows.length}
data={props.data}
/>
{/*//! Table Body Component */}
<TableBody>
{stableSort(props.data.rows, getSorting(order, orderBy))
.slice(number * rowsPerPage, number * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = isSelected(row.name);
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover
onClick={(event) =>
handleClick(event, row.name, row.userId)
}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={props.data.rows.name}
selected={isItemSelected}
>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 49 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</div>
{/**
* ===============================================
* PAGINATION
* =============================================
*/}
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={props.data.rows.length}
rowsPerPage={rowsPerPage}
page={props.pagination.number}
backIconButtonProps={{
"aria-label": "Previous Page",
}}
nextIconButtonProps={{
"aria-label": "Next Page",
}}
onChangePage={props._handlePagination}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
console.log pagination
console.log("page", selectPage);
Table.js
function EnhancedTable(props) {
const [rowsPerPage, setRowsPerPage] = React.useState(10);
//! Select All Checkbox
function handleSelectAllClick(event) {
if (event.target.checked) {
const newSelecteds = props.data.rows.map((n) => n.name);
setSelected(newSelecteds);
return;
}
setSelected([]);
}
//! Handle CheckBox here
function handleClick(event, name, userId) {
const selectedIndex = selected.indexOf(name);
let newSelected = [];
const selectedIdIndex = SelectedId.indexOf(userId);
let newSelectedIndex = [];
console.log(userId);
let userid = [];
userid = userId;
console.log(selectedIndex);
props._handleCheckbox(selectedIdIndex, userid, SelectedId);
function handleChangeDense(event) {
setDense(event.target.checked);
}
const isSelected = (name) => selected.indexOf(name) !== -1;
const emptyRows =
rowsPerPage -
Math.min(
rowsPerPage,
props.data.rows.length - props.pagination.number * rowsPerPage
);
const { number } = props.pagination;
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<EnhancedTableToolbar numSelected={selected.length} data={props.data} />
<div className={classes.tableWrapper}>
<Table
className={classes.table}
aria-labelledby="tableTitle"
size={dense ? "small" : "medium"}
>
<EnhancedTableHead
numSelected={selected.length}
order={order}
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={props.data.rows.length}
data={props.data}
/>
{/*//! Table Body Component */}
<TableBody>
{stableSort(props.data.rows, getSorting(order, orderBy))
.slice(number * rowsPerPage, number * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = isSelected(row.name);
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover
onClick={(event) =>
handleClick(event, row.name, row.userId)
}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={props.data.rows.name}
selected={isItemSelected}
>
<TableCell padding="checkbox">
<Checkbox
checked={isItemSelected}
inputProps={{ "aria-labelledby": labelId }}
/>
</TableCell>
{rowData(row)}
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 49 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</div>
{/**
* ===============================================
* PAGINATION
* =============================================
*/}
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={props.data.rows.length}
rowsPerPage={rowsPerPage}
page={props.pagination.number}
backIconButtonProps={{
"aria-label": "Previous Page",
}}
nextIconButtonProps={{
"aria-label": "Next Page",
}}
onChangePage={() => props.handlePagination()}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
</div>
);
}
const mapStateToProps = (state) => {
return {
checkbox: state.AllUsers.Admin.checkBox,
};
};
export default connect(mapStateToProps, {})(EnhancedTable);

Issue :
As per your console log you are getting selectPage undefined initially, and you also setting up the value only on mount
React.useEffect(() => {
setPagination(selectPage); <-- Here i am trying to pass redux state to localstate.
}, []); // <--- this will executed only on mount
Solution :
I think you should listen for the changes in selectPage and only update If it's available
React.useEffect(() => {
if(selectPage) { // <--- check if available
setPagination(selectPage);
}
}, [selectPage]); // <--- will run useEffect on everychange of `selectPage`

Change the displayed data dynamically in react-table v7

Not sure if there is a good way to change the displayed data dynamically. For instance I would like boolean values to be displayed in the table as icons and without slowing down the rendering process too much. I'm using the latest version of react-table v7. I have added code from the Table component Thanks
import React from "react";
import { useTable, useRowSelect, useSortBy, usePagination } from "react-table";
import { CSVLink, CSVDownload } from "react-csv";
import { navigate } from "#reach/router";
function handleColumnsClick(url, id) {
if (url && id) navigate(`${url}${id}`);
}
const IndeterminateCheckbox = React.forwardRef(
({ indeterminate, ...rest }, ref) => {
const defaultRef = React.useRef();
const resolvedRef = ref || defaultRef;
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return (
<>
<input type="checkbox" ref={resolvedRef} {...rest} />
</>
);
}
);
function Table({ columns, data, allowSelection, direct }) {
// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
selectedFlatRows,
// pagination
page, // Instead of using 'rows', we'll use page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { selectedRowIds, pageIndex, pageSize },
} = useTable(
{
columns,
data,
initialState: { pageIndex: 0 },
},
useSortBy,
usePagination,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => [
// Let's make a column for selection
{
id: "selection",
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ getToggleAllRowsSelectedProps }) => (
<div>
{allowSelection && (
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
)}
</div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
<div>
{allowSelection && (
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
)}
</div>
),
},
...columns,
]);
}
);
// Render the UI for your table
return (
<>
<table
className="table table-sm table-striped table table-hover"
{...getTableProps()}
>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
// Add the sorting props to control sorting. For this example
// we can add them into the header props
<th
className="checkbox"
{...column.getHeaderProps(column.getSortByToggleProps())}
>
{column.render("Header")}
{/* Add a sort direction indicator */}
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td
onClick={(e) =>
handleColumnsClick(
direct[1],
cell.row.original[direct[0]]
)
}
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
<nav aria-label="Page navigation example">
<ul className="pagination justify-content-center">
<li className="page-item ">
<a
className="page-link"
tabIndex={-1}
aria-disabled="true"
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
{"<< First Page"}
</a>
</li>
<li className="page-item">
<a
className="page-link"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
{"<"}
</a>
</li>
<li className="page-item">
<a
className="page-link"
onClick={() => nextPage()}
disabled={!canNextPage}
>
{" >"}
</a>
</li>
<li className="page-item">
<a
className="page-link"
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
{"Last Page >>"}
</a>
</li>
</ul>
<ul className="pagination justify-content-right">
<div className="pagination">
<span>
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>{" "}
</span>
<span>
| Go to page:{" "}
<input
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const page = e.target.value ? Number(e.target.value) - 1 : 0;
gotoPage(page);
}}
style={{ width: "100px" }}
/>
</span>{" "}
<select
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
</div>
</ul>
<p>Selected Rows: {Object.keys(selectedRowIds).length}</p>
</nav>
<pre>
{/* Display selected rows for debugging */}
{/* <code>
{JSON.stringify(
{
selectedRowIds: selectedRowIds,
"selectedFlatRows[].original": selectedFlatRows.map(
(d) => d.original
),
},
null,
2
)}
</code> */}
</pre>
</>
);
}
function setColumns(props) {
const { data } = props;
if (data !== undefined && data.length !== 0) {
const columnsKeys = Object.keys(data[0]);
return columnsKeys.map((column) => {
return {
Header: column,
accessor: column,
};
});
}
}
function SelectTable(props) {
const columns = props.columns ? props.columns : setColumns(props);
const { data, allowSelection, direct } = props;
const addSelection = props.allowSelection ? props.allowSelection : false;
if (columns && data.length)
return (
<>
<Table
columns={columns}
data={data}
allowSelection={addSelection}
direct={direct}
/>
<button className="btn-outline btn-sm">
<CSVLink data={data}>Export to CSV </CSVLink>
</button>
</>
);
else return null;
}
export default SelectTable;