What's a workable solution to disabling a button based on a server response?

by Jim   Last Updated July 12, 2019 20:05 PM

I'm working with React-Native, Express, Node.js, and socket.io.

I have a game room where two users send data across a socket connection to the server which then updates both client's front end.

there is client-side validation that occurs after a button press (lets call it a power button) before data is sent. my issue is if the move ends up being invalid, the button is disabled because I programmed it to disable after press, however it actually only want it to disabled after data has been validated.

initially I thought validation occurred server side, then changed to client side to help with this issue, but now i'm stuck mentally.

here is the button component for a visual:

import React from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";

function PowerMoveBtn(props) {
  const disabled = this.props.disabled;

  function onSelect(type) {
    props.onSelect(type);
  }

  return (
    <View style={styles.btn}>
      <TouchableOpacity
        disabled={disabled}
        onPress={disabled ? null : () => onSelect(props.type)}
      >
        <Text>{props.type}</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  btn: {
    borderWidth: 1
  }
});

export default PowerMoveBtn;

Any ideas? Is server-side or client-side validation a better working solution?



Related Questions


Improving ReactJS code

Updated August 29, 2018 10:05 AM



Component design for simple single view timer app?

Updated December 03, 2017 16:05 PM

React Native A better solution to default form value?

Updated December 25, 2018 03:05 AM