I have a React application and I want the two Edit and Delete buttons to be displayed when I select a table row. I have a "isSelected" variable that I set to true when I click in the "changeStyle ()" function, but even then the two buttons do not appear.

I have this code:

const Details = () => {
const id = window.location.pathname.slice(10);
const navigate = useNavigate();
const [name, setName] = useState('');
const [entry, setEntry] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [countries, setCountries] = useState([]);
const [countryId, setCountryId] = useState('');
const [country, setCountry] = useState('');
const [continentId, setContinentId] = useState('');
const [description, setDescription] = useState('');
const [accounts, setAccounts] = useState([]);
let isSelected = false;
let selectedId = '';

const changeStyle = (id) => {
    setEntry(id);
    isSelected = true;
};

return (
    <div>
        <h4 className="text-center">{name}</h4>
        <div>
            <button className={`${styles.buttons} ${styles['add-button']}`} onClick={addAccount}>  Add contact</button>
            {isSelected && <>
                <button className={`${styles.buttons} ${styles['edit-button']}`} onClick={editAccount}>Edit</button>
                <button className={`${styles.buttons} ${styles['delete-button']}`}>Delete</button>
            </>}
        </div>
        <div className={styles['form-table-container']}>
            <form className="form-horizontal ng-pristine ng-valid" onSubmit={editContact}>
                <div className={`form-group ${styles['details-inputs']}`}>
                    <TextField id="outlined-basic" label="Name" variant="outlined" onChange={e => setName(e.target.value)} value={name} />
                </div>
            </form>
            <TableContainer className={styles.table} component={Paper}>
                <Table sx={{ minWidth: 395 }} aria-label="a dense table">
                    <TableHead>
                        <TableRow>
                            <TableCell className={styles.headers}>Account Type</TableCell>
                            <TableCell className={styles.headers}>Name</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {accounts.map((account) => (
                            <TableRow
                                key={account.accountExt}
                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                                className={styles.row}
                                onClick={() => changeStyle(account[1].id)}
                            >
                                <TableCell align="left"><img className={styles.image} src={`data:image/png;base64,${account[1].image}`} alt={account[1].accountInt}></img>{account[1].accountInt}</TableCell>
                                <TableCell align="left">{account[1].accountExt}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        </div>
    </div>
);
};

Please help.

CodePudding user response：

If you want to react on change, you need to set isSelected in a useState. const [isSelcted, setIsSelected] = useState(false).

CodePudding user response：

You can generate buttons with each row when mapping the array in this way every row will have its on buttons. Then you can use the id or index to delete or edit the values.

{accounts.map((account, index) => (
       <TableRow
        key={account.accountExt}
        sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
        onClick={() => changeStyle(account[1].id)}
       >
       <TableCell align="left"><img src={`data:image/png;base64,${account[1].image}`} alt={account[1].accountInt}></img>{account[1].accountInt}</TableCell>
       <TableCell align="left">{account[1].accountExt}</TableCell>
       {isSelected && <>
                <button>Edit</button>
                <button>Delete</button>
            </>}
       </TableRow>
  ))}