CODEWITHSUNDEEP
javascriptreact-nativecheckboxelementreact-hooks
user12499405
user12499405

Reputation:

is there way to check and unchecked the "check-boxes" from my example?

this is my example that I try to check and unchecked the "check-boxes" but I get confused and i will be happy if someone shows me how it should be done.

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { CheckBox } from 'react-native-elements';

const NewPlaceScreen = props => {
 const [checked, setChecked] = useState(false);


 return (
     <View>
         <CheckBox
             iconRight
             right
             title="apple"
             checked={checked}
             onPress={() => setChecked(true)}
         />
         <CheckBox
             iconRight
             right
             title="kiwi"
             checked={checked}
             onPress={() => setChecked(true)}
         />
     </View>
 );

};

NewPlaceScreen.navigationOptions = {
 headerTitle: 'viewsqq'
};

const styles = StyleSheet.create({
 TextStyle: {
     fontWeight: 'bold',
     color: 'grey'

 }
});

export default NewPlaceScreen

thats my example above

Upvotes: 1

Views: 118

Answers (2)

JMadelaine
JMadelaine

Reputation: 2964

You need to set them to the opposite of their previous state when pressed. You can do this by using the setState callback:

onPress={() => setChecked(prev => !prev)}

At the moment your check boxes are both using the same state variable checked so they will stay in sync - changing one will change the other. If this is not what you want, you should create a separate state variable for each checkbox.

UPDATE:

To treat each checkbox independently, you need to create state for each checkbox:

const [isAppleChecked, setIsAppleChecked] = useState(false)
const [isKiwiChecked, setIsKiwiChecked] = useState(false)

return (
  <View>
    <CheckBox
      iconRight
      right
      title="apple"
      checked={isAppleChecked}
      onPress={() => setIsAppleChecked(prev => !prev)}
    />
    <CheckBox
      iconRight
      right
      title="kiwi"
      checked={isKiwiChecked}
      onPress={() => setIsKiwiChecked(prev => !prev)}
    />
  </View>
)

Upvotes: 2

Flagship1442
Flagship1442

Reputation: 1726

You need to have a separate state for each box, otherwise they will always show the same thing. And you need to set the new state to the opposite of the old state:

const NewPlaceScreen = props => {
  const [appleChecked, setAppleChecked] = useState(false);
  const [kiwiChecked, setKiwiChecked] = useState(false);

  return (
    <View>
      <CheckBox
        iconRight
        right
        title='apple'
        checked={appleChecked} // use the apple-specific state
        onPress={() => setAppleChecked(prevState => !prevState)} // use the new apple state function
      />
      <CheckBox
        iconRight
        right
        title='kiwi'
        checked={kiwiChecked} // use the new kiwi state
        onPress={() => setKiwiChecked(prevState => !prevState)} // use the new kiwi function
      />
    </View>
  );
};

Upvotes: 0

Related Questions