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();
  };

enter image description here

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

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)