Develop Reference

i am trying to render Svg icons in a table , using material ui , in a react application. However, i see duplicate icons for different rows, any ideas?

I have an array of objects, where each object has a cryptocurrency-Id. i am using map to render a table and for rendering the token-image in the table i am calling a function: find_corresponding_icon(crypto-name), this function takes the crypto-name as a parameter and returns an image corresponding to it.I am seeing duplicate images rendering in my table.
import {ReactComponent as EthIcon} from '../../assets/eth.svg'
import {ReactComponent as DaiIcon} from '../../assets/dai.svg'
import {ReactComponent as UsdtIcon} from '../../assets/usdt.svg'
useEffect(()=>{
async function api_call(){
let res = await getTokenInfo()
setCurrecnyInfo(res.data.message) //setting state with an array of json objects
//currencyInfo=[{currencyId:1,tokenName:'Ethereum',Amount:312},
//{currencyId : 2, tokenName:'Dai',Amount:182},{currencyId : 3
, // tokenName:'USDT',Amount:882}]
}
api_call();
},[])
function find_corresponding_icon(CurrencyId){
if(CurrencyId === 1)
return <EthIcon />
else if(CurrencyId === 2)
return <DaiIcon />
else if(CurrencyId === 3)
return <UsdtIcon />
}
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>TokenName</TableCell>
<TableCell>Name</TableCell>
<TableCell>Amount($)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row,id) => (
<TableRow key={id}>
<TableCell component="th" scope="row">{find_corresponding_icon(row.currencyId)}</TableCell>
<TableCell align="right">{row.tokenName}</TableCell>
<TableCell align="right">{row.Amount}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
The result looks like so:
i am very sure all the icons look different, so there should not be a repetition

Remove a specific item from an array of objects Reactjs

Hi All i am building a clone service desk system using React and materialUI I am having issues with removing specific items from an array of objects when the user clicks on it. I have tried to use updatedRow.splice(index,1) but this just removes the last object added to the array and not a specific object. I am trying to remove it based on the ticketID property I have tried to use the array method indexof to console log the specific index of the object but it just returns -1 meaning the item is not in the array when its displaying on the screen. The function should filter and only keep the items which havent been selected based on if the condition is true and remove what is true then should call Setrows to update what is on the screen. Could someone explain exactly what I am doing wrong here see code below...
/// original array to populated with data
let row = [];
const [rows, setRows] = useState(row);
const formDataHandler = ({ desc, option }) => {
const data = {
description: desc,
priority: option,
lastUpdate: Date.now(),
ticketID:shortid.generate()
};
setRows([...rows, data]);
console.log(rows);
};
/// delete row function
const removeTicket = (index)=> {
let updatedRow = rows;
// updatedRow.splice(index,1)
console.log(updatedRow.filter(index => ticketID !== index.id? ))
setRows([...updatedRow])
/// returned
<Container maxWidth="md">
<Grid>
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Description</TableCell>
<TableCell>Priority</TableCell>
<TableCell>Last update</TableCell>
<TableCell>Ticket ID</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.length>0?rows.map((row) => (
<TableRow key={row.ticketID}>
<TableCell component="th" scope="row">
{row.description}
</TableCell>
<TableCell>{row.priority}</TableCell>
<TableCell>{row.lastUpdate}</TableCell>
<TableCell>{row.ticketID}</TableCell>
<TableCell>
<IconButton onClick={removeTicket} aria-label="delete" color="primary">
<DeleteIcon />
</IconButton>
</TableCell>
</TableRow>
)):null}
</TableBody>
</Table>
</TableContainer>
</Grid>
<FormDialog formData={formDataHandler} />
{JSON.stringify(rows)}
</Container>
);
}

You need to pass the ticketID to your IconButton's onClick handler:
<IconButton
onClick={() => removeTicket(row.ticketID)}
aria-label="delete"
color="primary"
>
<DeleteIcon />
</IconButton>
And update your handler where you can create a new array using the .filter() method:
const removeTicket = (ticketID)=> {
setRows(rows.filter(item => ticketID !== item.ticketID)
}
This rows.filter() returns every element where the ticketID is not the same as the one you passed down.

If you know index that will be removed you can use Array.prototype.slice and
the logic is disconsider the element at index.
So, you will have to add the index as second param in your map function and change the onClick on IconButton to () => removeTicket(index).
Your remove function will contains the following snippet:
setRows(prevRows => [
...prevRows.slice(0, index),
...prevRows.slice(index + 1)
]);
If you need the ticketId to make a call to an api you can get it through index rows[index] or by passing it in the onClick function () => removeTicket(row.ticketID, index)

Prevent parent click event from firing when checking child checkbox in React

In React, is it possible to disable a redirection when a switch button is placed inside a redirection component?
I have a clickable TableRow which redirects to another component and a switch button (checkbox) inside, like this:
The TableRow component with his TableCell and the Switch button inside:
<TableRow
className="h-40 cursor-pointer"
hover
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={n.id}
selected={isSelected}
onClick={event => handleClick(n)}
>
<TableCell component="th" scope="row" align="left">
<Switch
checked={state.checkedB}
onChange={handleChange("checkedB")}
value="checkedB"
/>
</TableCell>
</TableRow>
Here is the handleChange function and the state of the Switch button:
const [state, setState] = React.useState({
checkedB: true,
});
const handleChange = name => event => {
setState({ ...state, [name]: event.target.checked });
};
And here is the handleClick function in the TableRow component which redirect to another component:
function handleClick(item){
props.history.push('/apps/fournisseurs/'+item.id+'/'+ item.handle);
}

You'll want to stop propagation (event.stopPropagation()) when you click on the Switch. This will stop the event from bubbling up the chain and will essentially "ignore" the parent click handler (onClick in this case).
const handleChange = name => event => {
event.stopPropagation();
setState({ ...state, [name]: event.target.checked });
};
<TableRow
className="h-40 cursor-pointer"
hover
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={n.id}
selected={isSelected}
onClick={event => handleClick(n)}
>
<TableCell component="th" scope="row" align="left">
<Switch
checked={state.checkedB}
onChange={handleChange("checkedB")}
value="checkedB"
onClick={e => e.stopPropagation()}
/>
</TableCell>
</TableRow>
Edit:
After finding another answer, unfortunately the way for the above code to work would be to add an additional handler to the Switch component of onClick={e => e.stopPropagation()}

Why the index is always the last index when using it to pass to function while map over an array?

I am using map to loop over the array object getting from server, each object is used for one row in a table to show data. And I want to do a particular action for each row by calling function and pass to an index.
The code here:
<TableBody>
{productsData.map((product, index) => {
return (
<TableRow key={product.productId}>
<TableCell>
<Button
aria-owns={anchorEl ? `manipulation${index}` : undefined}
aria-haspopup="true"
onClick={handleClick}
className={classes.button}
size="small"
variant="contained"
>
Thao tác
</Button>
<Menu id={`manipulation${index}`} anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
<MenuItem onClick={**handleOpen(index)**}>Xem trước</MenuItem>
</Menu>
</TableCell>
</TableRow>
)
})}
</TableBody>
The way I declare handleOpen: const handleOpen = (index) => () => {...}
=> I expected the handleOpen will render like that: handleOpen(0) for row 0, handleOpen(1) for row 1. But it's always end up with the last index of array. May be about the closure in javascript but I dont know how to fix
Please give me any suggestion. Thank in advance.

The way you've done it will call the handleOpen function immediately after rendering, instead of only calling it on click like you want it to.
To fix this, use an anonymous function:
<MenuItem onClick={() => handleOpen(index)}>
This will create a function that will only be called on actual click of the MenuItem component.

Using Buttons in React Material UI Table

I have made a table using Material UI where I have two buttons in the first column of every row. I wish to edit/delete rows on clicking these but Im stuck on logic. Is it even possible with my implementation ? If not then what's the preferred way of doing so?
render() {
var deleteIcon =
(<IconButton onClick={console.log("delete")}>
<DeleteIcon color="secondary" />
</IconButton>
);
const editIcon = (
<IconButton onClick={console.log("edited")}>
<EditIcon color="primary" />
</IconButton>
);
return(
<TableBody>
{this.state.serviceData.map(n => {
return (
<TableRow key={n.id}>
<TableCell style={styles.editor} component="th" scope="row">
{deleteIcon}
{editIcon}
</TableCell>
<TableCell>{n.domain}</TableCell>
<TableCell>{n.service_name}</TableCell>
</TableCell>
</TableRow>
)};
And my result is :

Building on #st4rl00rd's comment, I was able to tie the buttons using :
const editIcon = (
<IconButton onClick={this.editItem}>
<EditIcon color="primary" />
</IconButton>
);
and binding them in the constructor. I was able to get the selected row data by doing :
<TableBody>
{this.state.serviceData.map(n => {
return (
<TableRow key={n.id} onClick={this.getData.bind(this,n)}>

I have recreated your problem and solved the problem with my logic.
I passed the index of each element as a parameter to the handler functions.
Eg:
const editIcon = index => (
<IconButton onClick={() => this.editComponent(index)}>
<EditIcon color="primary" />
</IconButton>
);
DELETION
For deletion, pass the index as params to the handler function and delete the element at specified index using splice operator.
deleteComponent(index) {
const serviceData = this.state.serviceData.slice();
serviceData.splice(index, 1);
this.setState({ serviceData });
}
EDITING
I have used a state called index to keep track of the index the user is currently editing. Initially the index is -1
So whenever the user clicks edit button the editedIndex is updated.
editComponent(index) {
this.setState({ editedIndex: index });
}
I created two TextField Component which is shown at the specified cell (the cell where editbutton is clicked)
const editDomain = (
<TextField
id="domain"
label="Domain"
className={classes.textField}
value={this.state.editedDomain}
margin="normal"
onChange={this.handleChange('editedDomain')}
/>
);
So Whenever the rendering component Index is equal to editedIndex the editing Compomemts are shown at corresponding Tablecell
<TableCell>
{serviceData.indexOf(n) === editedIndex
? editDomain
: n.domain}
</TableCell>

I suppose you want to do this
I have done same using React-Table here is the link for my project repo you can consider this as an example:
https://github.com/AdnanShah/ReactJS-KretaHub-/blob/Thank_You_Init/src/app/routes/dashboard/routes/Default/rows.js