lundi 20 août 2018

Checkbox not rendering according to state value

I have to change the Checkbox UI from Check to Uncheck and vice versa according to the value of the state : checked.

For that I have used 'react-native-elements'.

My state name is checked

I have also taken two Buttons to change the state value, but the checkbox is not rendering according to value of the state.

I have done as below : Please guide.

Thanks.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button,Alert} from 'react-native';
import { CheckBox } from 'react-native-elements'

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

render() {
    return (
      <View style={styles.container}>

<CheckBox
  title='Click Here'
  checked={this.state.checked}
/>

<CheckBox
  center
  title='Click Here'
  checked={this.state.checked}
/>

  <Button value="Check"
       title="Check"
          onPress={()=>{
            this.state.isChecked=true;
            Alert.alert("State >>"+this.state.isChecked);
          }}
       />

       <Button value="Un-Check"
       title="Un-Check"
          onPress={()=>{
            this.state.isChecked=false;
            Alert.alert("State >>"+this.state.isChecked);
          }}
          />
      </View>
    );
  }
}




Aucun commentaire:

Enregistrer un commentaire