how can I turn this constructor code into a const

export default class App extends Component {
   
  constructor(props) {
    super(props);
    this.state = { visible: true,};
  }

  

  hideSpinner=()=> {
    this.setState({ visible: false });
  }
  showSpinner=()=> {
    this.setState({ visible: true });
  }
 
  
   
  
   

  render() {
    return (
      <View style={{ flex: 1 }}>
      <StatusBar hidden />
        <WebView
          onLoadStart={() => (this.showSpinner())}
          onLoad={() => this.hideSpinner()}
          style={{ flex: 1 }}
          source={{ uri: 'https://treinamento.viashopmoda.com.br/' }}
          renderError={() => 
            <View style={styles.loadingOrErrorView}>
            <View style={styles.container}>
            <Image source={logo} style={{width:280,height:200}}/>
            <Text style={{fontSize:20,marginTop:15}}>Você está sem conexão</Text>
            <TouchableOpacity style={styles.botao} onPress={()=>recarregar()}>
              <Text style={{color:'white',fontSize:18}}>Tentar novamente <FontAwesome name="repeat" size={18} color="white" /></Text>
            </TouchableOpacity>
          </View>
          </View>    
          }
        />
        {this.state.visible && (
        <View style={styles.fundo}>
        <ActivityIndicator style={styles.telac} size="large" color="ccc"/>
        </View>
      )}
      </View>
    );
  }
}

You mean transform the class to a functional component? You should use useState. So it can be something like:

function App {
   const [visible, setVisible] = useState(true);

  hideSpinner=()=> {
    setVisible(false)
  }
  showSpinner=()=> {
    setVisible(true)
  }

  return (
      <View style={{ flex: 1 }}>
      <StatusBar hidden />
        <WebView
          onLoadStart={() => (showSpinner())}
          onLoad={() => hideSpinner()}
          style={{ flex: 1 }}
          source={{ uri: 'https://treinamento.viashopmoda.com.br/' }}
          renderError={() => 
            <View style={styles.loadingOrErrorView}>
            <View style={styles.container}>
            <Image source={logo} style={{width:280,height:200}}/>
            <Text style={{fontSize:20,marginTop:15}}>Você está sem conexão</Text>
            <TouchableOpacity style={styles.botao} onPress={()=>recarregar()}>
              <Text style={{color:'white',fontSize:18}}>Tentar novamente <FontAwesome name="repeat" size={18} color="white" /></Text>
            </TouchableOpacity>
          </View>
          </View>    
          }
        />
        {visible && (
        <View style={styles.fundo}>
        <ActivityIndicator style={styles.telac} size="large" color="ccc"/>
        </View>
      )}
      </View>
    );
}
1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.