Disable a button from an if-else statement-CodePudding

I'm new to reactJs. I'm trying to disable "Grade" button after it passed a validation function in "disableGrading". However, I don't know how to call "Grade" button in "disableGrading" function to disable it.

function disableGrading() { 
     if (target.grade > 50) {
         button.disable } }  //not sure how to call "Grade" button to disable it


{paperDetails.marks_validation ? (

          disableGrading()

          ) :

          <Button
            title="Grade"
            buttonStyle={{backgroundColor: PrimaryColor, borderRadius: 10}}
            titleStyle={{fontSize:13}}  
            onPress={setGrading}                     
          />
        
          }

Any guidance is much appreciated

CodePudding user response：

you need to use html property disable for Button, and assign dynamic value of boolean true/false,

[isDisable,setIsDisable] = useState(false);

function disableGrading() { 
  if (target.grade > 50) {
    setIsDisable(true); 
  } 
} 


{paperDetails.marks_validation ? (

  disableGrading()

  ) :

  <Button
    title="Grade"
    buttonStyle={{backgroundColor: PrimaryColor, borderRadius: 10}}
    titleStyle={{fontSize:13}}  
    onPress={setGrading}    
    disable={isDisable}                 
  />
     
}

CodePudding user response：

You can do this with the use of hooks. Create a state to keep record if button is disabled or not

const [isDisabled, setDisabled] = useState(false);

and the button be like

<Button
  title="Grade"
   buttonStyle={{backgroundColor: PrimaryColor, borderRadius: 10}}
   titleStyle={{fontSize:13}}  
   onPress={setGrading}
   disabled={isDisabled}                
/>

and disabled it where you want like this

setDisabled(true)