How use this hook inside a react.component class?

How to / Third Party Tooling
5

Hi. :smiley:
First of all, thanks for your help, it has helped me a lot.

Regarding this, I thought that it is necessary, I have many views, i’m using react-navigation-stack, according to my first tutorial it had to be with classes, but now that you mention it to me and that I am understanding the code better, I realize that you are right and I’m complicating the life with the classes

Two hours ago I tried something different although longer, I tested that and my app worked. But your code, dividing Button and ModalContent in diferent functions looks more simple and tidy.

Part of my new code:

function Calculate() {
const [visibleModal, setVisibleModal] = useState(null);

  _renderModalContent = () => (      
    <View style={styles.modalContent} collapsable={false}>
      <View style={{flex: 3, flexDirection: 'row'}}>
        <View style={{flex: 0.2}}><Text></Text></View>
        <View style={{flex: 2.6}}>
          <Text style={styles.tituloTerminos}>{highlight(' Explicación de los algoritmos ')}</Text>
        </View>
        <View style={{flex: 0.2}}>

          {_renderButton(
            <Text 
             style={{
              color: "grey", 
              textAlign: "left"
            }}> X</Text>, 
            () => setVisibleModal(null))
            }
        </View>
      </View>
      <View style={{ flex: 1 }}>
            <TouchableOpacity>
              <Swipeable />
            </TouchableOpacity>
      </View>
    </View>

  ); 

_renderButton = (text, onPress) => (
  <TouchableOpacity onPress={onPress}>
    <View style={styles.button}>
      <Text>{text}</Text>
    </View>
  </TouchableOpacity>
);

  return(
   <View style={styles.checkboxContainer}>
      <View style={{flexDirection: "column"}}>
              <View style={{flexDirection: "row"}}><Text>---------</Text></View>
              <View style={{flexDirection: "row"}}><MyCheckbox /></View>
              </View>
              <View style={{flexDirection: "column"}}>
                <TouchableHighlight>
                  <View>
                    {_renderButton(
                       <Text style={{
                          color: "#2D6795"}}>
                          Apruebo y acepto los resultados
                       </Text>, 
                          () => setVisibleModal(1)
                    )}
                      <Modal isVisible={visibleModal === 1}>
                          {_renderModalContent()}                   
                      </Modal>
                  </View>
                </TouchableHighlight>
       </View>
    </View>

}

I delete:

state = {
  visibleModal: null,
  item: null,
};

and replace it for:
const [visibleModal, setVisibleModal] = useState(null);

I delete all “this.” for:
this._renderModalContent() or this._renderButton()

and I delete all this.setState like that:
this.setState({ visibleModal: 1 })

and replacing it for:
() => setVisibleModal(1)

Now I will apply your suggested code and delete the class react.component. Thanks so much.

1 Like