react-native hide show button based on state-CodePudding

I want to show button based on my state I have a state which can have three state, active, submit, accept so i want to show a button based on that status.

I am a new bee so I am stuck here.

<TouchableOpacity style={{...styles.actionButton}} >
    <MaterialCommunityIcons name="clock-edit" color={colors.dark_primary_color} size={scale(22)} />
</TouchableOpacity>

<TouchableOpacity style={styles.actionButton}>
  <MaterialCommunityIcons name="delete" color={colors.delete_icon} size={scale(22)} />
</TouchableOpacity>

CodePudding user response：

  This is how you can show differenbu button based on some status
         <View style={styles.buttonView} >
          { 
             status !== "active" && 
              <TouchableOpacity style={{...styles.actionButton}} >
                <MaterialCommunityIcons name="clock-edit" color={colors.dark_primary_color} size={scale(22)} />
             </TouchableOpacity>
                        
          }
{ 
             status !== "submit" && 
              <TouchableOpacity style={{...styles.actionButton}} >
                <MaterialCommunityIcons name="clock-edit" color={colors.dark_primary_color} size={scale(22)} />
             </TouchableOpacity>
                        
          }
{ 
             status !== "approve" && 
              <TouchableOpacity style={{...styles.actionButton}} >
                <MaterialCommunityIcons name="clock-edit" color={colors.dark_primary_color} size={scale(22)} />
             </TouchableOpacity>
                        
          }
                        
        </View>

CodePudding user response：

Another approach is to use styling instead of conditional rendering, as this can be expensive if the state often changes because the positions of elements will have to be recalculated when the component unmounts and mounts repeatedly and this affects performance. So you can try the following

...
<TouchableOpacity style={{
    ...styles.actionButton, 
    display: status === 'active' ? 'flex' : 'none'   // Add this line
}} >
  <MaterialCommunityIcons name="clock-edit" color={colors.dark_primary_color} size={scale(22)} />
</TouchableOpacity>

<TouchableOpacity style={{
    ...styles.actionButton, 
    display: status === 'submit' ? 'flex' : 'none'  // Add this line
}} >
  <MaterialCommunityIcons name="delete" color={colors.delete_icon} size={scale(22)} />
</TouchableOpacity>
...