How to make button change on click without having to refresh page in React
I have pairs of "yes" "no" buttons that were not changing color onClick unless I refreshed the page. My bandaid solution was to add refresh() to handleClick which forces a full page refresh every time a button is clicked. While this does change the color of the button, I would much prefer the page not having to refresh and load at the top after every button click, and each button seamlessly changes color when clicked.
I have tried to use e.preventDefault() from this answer to also prevent the full page refresh but I'm not sure of where or how to use it in my case as I am not passing an event to the handler.
<React.Fragment>
<Button
style=
variant="contained"
onClick={() =>
handleClick(row.insight_id, row.device_id, 1)
}
color={
row.userConfirmed == null
? 'default'
: row.userConfirmed === 1
? 'primary'
: 'default'
}
>
Yes
</Button>
<Button
style=
variant="contained"
onClick={() =>
handleClick(row.insight_id, row.device_id, 0)
}
color={
row.userConfirmed == null
? 'default'
: row.userConfirmed === 1
? 'default'
: 'primary'
}
>
No
</Button>
</React.Fragment>
const handleClick = (insightId, deviceId, value) => {
dispatch(updateUserConfirm(insightId, deviceId, value));
refresh();
};
EDIT: Addition of reducer & where row comes from
const userInsightsReducer = (state = initialState, action) => {
switch (action.type) {
.
.
.
case UPDATE_USER_CONFIRM_BEGIN:
return {
...state,
result: 'BEGINNING',
};
case UPDATE_USER_CONFIRM_SUCCESS:
const userInsightsDataNew = state.userInsightsData
const insightIndex = state.userInsightsData.findIndex(insight => insight.device_id === action.payload.deviceId && insight.insight_id === action.payload.insightId )
const updatedInsight = {...state.userInsightsData[insightIndex], userConfirmed:action.payload.value}
userInsightsDataNew[insightIndex] = updatedInsight
return {
...state,
userInsightsData : userInsightsDataNew,
result: "SUCCESS",
};
case UPDATE_USER_CONFIRM_FAILURE:
return {
...state,
result: 'FAILURE',
let row = userInsights.userInsightsData[index];

Comments
Post a Comment