React Button not registering when pressed-CodePudding

I have 2 Buttons. Delete and Save. Depending if the state of editMode is true or false it will display on of these. But my problem is that the Save button is not registering anything at all. I tried pretty much everything. What can be the problem here?

<MaicoButton color={'secondary'} textButton={true} onClick={onEdit}>
              {t('actions.edit', { defaultValue: 'Edit' })}
            </MaicoButton>
            {!editMode ? (
              <MaicoButton
                color={'primary'}
                textButton={true}
                style={{ marginLeft: 24 }}
                onClick={() => onDeleteProfile(currentUserId)}
              >
                {t('actions.delete', { defaultValue: 'Delete' })}
              </MaicoButton>
            ) : (
              <MaicoButton
                color={'primary'}
                textButton={true}
                style={{ marginLeft: 24 }}
                onClick={() => console.log('Test')}
              >
                {t('actions.save', { defaultValue: 'Speichern' })}
              </MaicoButton>

EDIT: I am sorry here is more code:

const [editMode, setEditMode] = useState(false)

const onEdit = () => {
    setEditMode((editMode) => !editMode)
  }

CodePudding user response：

I suspect that you have problem with editMode variable- try to render it on frontend <h2>{editMode}</h2> and check what is happening.

Maybe try to change !editMode ? with editMode == null || editMode == false ?

Another useful thing would be to eliminate all additional problems, that might occure- try render two buttons with no additional functions and properties attached to it.

<h2>editMode current val= {editMode}</h2>

{(editMode == null || editMode == false) ? (
                  <Button
                    color={'primary'}
                    textButton={true}
                    }
                  >
                   Delete button
                  </Button>
                ) : (
                  <Button
                    color={'primary'}
                    textButton={true}
                    }
                  >
                    Save button
                  </Button>
                )}

CodePudding user response：

as @NightBird said maybe the problem comes from state of editMode, here I tried this code and it's working

{!editMode ? (
        <button
          color={"primary"}
          style={{ marginLeft: 24 }}
          onClick={() => onDeleteProfile(currentUserId)}
        >
          btn1
        </button>
      ) : (
        <button
          color={"primary"}
          style={{ marginLeft: 24 }}
          onClick={() => console.log("Test")} // not registering
        >
          btn2
        </button>
 )}

here is the link if you want to try it : https://codesandbox.io/s/fervent-clarke-s2lt74?file=/src/App.js:339-744

Otherwise maybe you have to share with us how the value of editMode get changed