Tengo una tabla de usuarios que lleno por medio de un useEffect
que trae los datos de una API, cada fila tiene un boton que abre un Dialog
para agregar una suscripcion a la tabla subscription
. Hay un dato que tienen en comun la tabla Users
y la tabla subscription
el campo Code
, quisiera que cuando abra el Dialog
tome el valor del campo Code
de la fila a la que le dio click
y lo muestre en el Dialog
.
As como se muestra en la imagen, si al hacer click
en la fila con el code 523
en el Dialog
aparezca el valor 523
.
¿Alguna idea o sugerencia para poder lograrlo?
const initialState={code:0, email:'', alias:''}
const[subscription, setSubscription]=useState(initialState);
const handleChange=(event)=>{
setSubscription({...subscription,[event.target.name]:event.target.value})
}
const handleSubmit=(event)=>{
event.preventDefault();
if(!subscription.code || !subscription.email || !subscription.alias)
return
const postSubscription=async()=>{
try {
axios.post('/api/Subscription/add',subscription);
props.history.push('/Subscription');
}
catch (error) {
console.log('error', error);
}
}
postSubscription();
}
<MaterialTable
title="Users"
columns={[
{ title: 'Code', field: 'code' , type: 'numeric'},
{ title: 'Name', field: 'name' },
{ title: 'Lastname', field: 'lastname' },
{ title: 'Age', field: 'age', type: 'numeric'},
]}
data={user.Users}
options={{
maxBodyHeight: '300px',
headerStyle: { position: 'sticky', top: 0 }
}}
actions={[
{
icon: 'account_box',
tooltip: 'Add subscription',
onClick:()=>{ handleClickOpen()}
}
]}
/>
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Subscription/DialogTitle>
<DialogContent>
<DialogContentText>
Subscription
</DialogContentText>
<form onSubmit={handleSubmit}
<TextField
id="filled-name"
name="code"
label="Code"
value={subscription.code}
onChange={handleChange}
margin="normal"
variant="outlined"
/>
<TextField
id="filled-name"
label="Email"
value={subscription.email}
name="email"
onChange={handleChange}
margin="normal"
variant="outlined"
/>
<TextField
id="filled-multiline-static"
label="Alias"
value={subscription.alias}
name="alias"
onChange={handleChange}
margin="normal"
variant="outlined"
/>
<Button
variant="contained"
color="primary"
type="submit">
Add
</Button>
</form>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
</DialogActions>
</Dialog>
</div>
);
}