How to Disable a Button after 1 click?-CodePudding

i am making an app of react-native and i need someone's help with my stack of code

i need to disable the button after just one click. can someone help? the problem is, i am using props and because of that i am unable to disable property.

import React from "react";
import { View, Text, StyleSheet , Button, Image ,TouchableOpacity} from 'react-native'
import colors from "../../constants/colors";

const DoctorItem = props =\> {
return(
\<TouchableOpacity onPress={props.onViewDetail}\>
\<View style={styles.dr}\>
\<Image style={styles.img} source={{uri:props.image}}/\>
\<Text style= {styles.title}\>{props.title}\</Text\>
\<Text style= {styles.price}\>{props.price} RS \</Text\>
\<View style = {styles.actions}\>
\<Button style={styles.btn} color={colors.primary} title="View Details " onPress={props.onViewDetail} /\>
\<Button  style = {styles.btn} color={colors.primary} title="To Registration" onPress={props.onRegistration}  /\>
\</View\>
\</View\>
\</TouchableOpacity\>
);
}

const styles= StyleSheet.create({
dr:{
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: 'white',
height: 300,
margin: 20,

    },
    img:{
        width: '100%',
        height: '60%'
    },
    title:{
        fontSize: 18,
        marginVertical : 4,
        textAlign:'center',
        fontFamily:'opsb'
        
    
    
    },
    price:{

fontSize : 14,
color:'#888',
textAlign:'center',
fontFamily:'ops'
},
actions:{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: '25%',
paddingHorizontal: 20

    },
    btn : {
        padding:5,
        color:colors.primary
    }

});

export default DoctorItem;\

import React from 'react';
import { FlatList, Text } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import dr from '../../store/reducers/dr';
import DoctorItem from '../../components/Doctor/DoctorItem';
import DrDetail from '../shop/DrDetail';
import \* as appointActions from '../../store/actions/appoint';
import {HeaderButtons,Item} from 'react-navigation-header-buttons';
import CustomHeaderButton from '../../components/UI/headerButton';
import colors from '../../constants/colors';

const drscreen = props =\> {
const dr = useSelector(state =\> state.dr.availableDr);
const dispatch = useDispatch()
return (
\<FlatList
data={dr}
keyExtractor={item =\> item.id}
renderItem={itemData =\> \<DoctorItem
image= {itemData.item.imageUrl}
title={itemData.item.title}
price={itemData.item.price}
onViewDetail={()=\>{

          props.navigation.navigate('DoctorDetails',{
            doctorId:itemData.item.id,
          doctorTitle:itemData.item.title
        });
        }} 
        onRegistration={()=>{
          dispatch(appointActions.appointDoc(itemData.item))
          
        }}
        />}
    />

);
};

drscreen.navigationOptions = navData =\> {
return{

    headerTitle: 'All Doctors',
    headerRight: (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Appoint"
          iconName={"ios-checkmark-done-outline"}
          onPress={() => {
            navData.navigation.navigate ("Register")
              
          }}
        />
      </HeaderButtons>
    )

}

};

export default drscreen;\

Have tried using the disable function, but probably incorrectly. if anybody is familiar with this coding format, please help.

CodePudding user response：

You can still use a state even if you pass the onPress function via the props. We can define a function that handles both as follows.

const DoctorItem = props => {

const [enabled, setEnabled] = useState(true)

function handlePress() {
    props.onRegistration()
    setEnabled(false)
}

return(
   <TouchableOpacity onPress={props.onViewDetail}/>
     <View style={styles.dr}\>
       <Image style={styles.img} source={{uri:props.image}}/>
       <Text style= {styles.title}>{props.title}\<Text />
       <Text style= {styles.price}>{props.price} RS </Text>
       <View style = {styles.actions}\>
        <Button style={styles.btn} color={colors.primary} title="View Details " onPress={props.onViewDetail} />
        <Button disabled={!enabled}  style = {styles.btn} color={colors.primary} title="To Registration" onPress={handlePress}  />
      </View>
    </View>
   </TouchableOpacity>
   )
}