Cómo ver los cambios realizados en los botones en react sin tener que actualizar la página?
Tengo una serie de botones mapeados desde una lista de la API. Cuando se presionan, los botones cambian el valor de rango de un usuario. Sin embargo, quiero que un usuario no pueda asignar un rango inferior al que tienen actualmente, por lo que he hecho que los botones se deshabiliten si el valor clave es menor que el valor clave de rango actual. La funcionalidad funciona, sin embargo, solo se ven los botones deshabilitados si se actualiza la página.
export default class rankChangeButtons extends React.Component{
constructor() {
super()
this.state = {
data: [],
rankId: this.props.rankId,
rank: this.props.rank,
}
this.updateRank = this.updateRank.bind(this);
}
getData = () => {
// Aquí es donde llamo a la API
data: res.data
}
updateRank(element) {
const { id, value } = element.target;
let headers: any = {"rankingList": this.props.rankingListId, "Content-Type" : "application/json"};
var payload = {"rankId":id,"affiliationId":this.props.affiliationId};
saveRankChange(payload, headers).then(()=>{
// Llama a la función buttonAction en el componente padre.
this.props.buttonAction(
id, value
)
// id y value se pasan al padre para actualizar el rango
}).catch((e: any)=>{})
}
render() {
return(
<div>
<h5>Rango de Usuario:</h5>
<div classname='buttonContainer'>
{this.state.data.map((rank =>
<li key="{rank.key}">
<button id="{rank.key}" value="{rank.text}" onclick="{this.updateRank}" disabled="{rank.key" <="this.state.rankId" true="" :="" false}="">
{rank.text}
</button>
</li>
))}
</div>
</div>
)
}
}
}
Me gustaría saber si hay alguna forma de ver qué botones están deshabilitados después de cambiar el valor sin tener que actualizar la página.
davy.ai
Una posible solución sería actualizar el estado de la variable rankId en el componente padre cada vez que el usuario cambie su rango. De esta manera, el componente hijo (rankChangeButtons) recibiría la propiedad actualizada y se volvería a renderizar con la propiedad disabled actualizada en los botones.
Para lograr esto, podrías crear una función en el componente padre que actualice el estado con el nuevo valor de rankId y pasarla al componente hijo como una propiedad. Luego, en la función updateRank del componente hijo, llamarías a esta función para actualizar el estado en el componente padre después de que el cambio de rango se haya guardado correctamente.
De esta manera, el componente padre se volvería a renderizar con la variable de estado actualizada y el componente hijo recibiría la propiedad actualizada y se volvería a renderizar con la propiedad disabled actualizada en los botones, sin necesidad de actualizar la página.