Add value of checkbox to an array when it is clicked

Question

I have this situation where I want to transfer userid to an array which is defined in State.

I want to do it when I click on the checkbox to select it, and I want to remove the userid from the array when I deselect the checkbox

import React, { Component } from "react";
import { 
    View,
    Text,
    StyleSheet,
    FlatList,
    AsyncStorage
    } from "react-native";
import axios from 'axios';
import { Button, Container, Content, Header, Body, Left, Right, Title } from 'native-base';
import Icon from 'react-native-vector-icons/Ionicons';
import { List, ListItem, SearchBar, CheckBox } from "react-native-elements";
    
    // const itemId = this.props.navigation.getParam('itemId', 'NO-ID');
    // const otherParam = this.props.navigation.getParam('otherParam', 'some default value');

    class TeacherSubjectSingle extends Component{
        static navigationOptions = {
            header : null
        }
        // static navigationOptions = {
        //     headerStyle: {
        //         backgroundColor: '#8E44AD',
        //       },
        //     headerTintColor: '#fff',
            
        // }

        state = {
            class_id: null,
            userid: null,
            usertype: null,
            student_list: [],
            faq : [],
            checked: [],
        }

        componentWillMount = async () => {
            const {class_id, student_list, userid, usertype} = this.props.navigation.state.params;
            await this.setState({
                class_id : class_id,
                student_list : student_list,
                userid : userid,
                usertype : usertype,
            })
            console.log(this.state.class_id)
            var result = student_list.filter(function( obj ) {
                return obj.class_section_name == class_id;
              });
            this.setState({
                student_list: result[0]
            })
            
        }

        renderSeparator = () => {
            return (
              <View
                style={{
                  height: 1,
                  width: "100%",
                  backgroundColor: "#CED0CE",
                }}
              />
            );
        };

        checkItem = (item) => {
            const { checked } = this.state;
            console.log(item)
            if (!checked.includes(item)) {
              this.setState({ checked: [...checked, item] });
              
            } else {
              this.setState({ checked: checked.filter(a => a !== item) });
            }
            console.log(checked)
        };

        render(){
            
            return (
                <Container>
                    <Header style={{ backgroundColor: "#8E44AD" }}>
                        <Left>
                            <Button transparent onPress={()=> this.props.navigation.navigate('ClassTeacher')}>
                                <Icon name="ios-arrow-dropleft" size={24} color='white' />
                            </Button>
                        </Left>
                        <Body>
                            <Title style={{ color: "white" }}>{this.state.class_id}</Title>
                        </Body>
                        <Right>
                            {this.state.checked.length !== 0 ? <Button transparent onPress={()=> this.props.navigation.navigate('ClassTeacher')}>
                                <Text>Start Chat</Text>
                            </Button> : null}
                        </Right>
                    </Header>
                    <View style={{flex: 1, backgroundColor: '#fff'}}>
                    <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
                    <FlatList
                        data={this.state.student_list.students}
                        extraData={this.state.checked}
                        renderItem={({ item }) => (
                        <ListItem
                            // roundAvatar
                            title={<CheckBox
                            title={item.name}
                            checkedColor='#8E44AD'
                            onPress={() => this.checkItem(item.userid)}
                            checked={this.state.checked.includes(item.userid)}
                            />}
                            // subtitle={item.email}
                            // avatar={{ uri: item.picture.thumbnail }}
                            //containerStyle={{ borderBottomWidth: 0 }}
                            onPress={()=>this.props.navigation.navigate('IndividualChat', {
                            rc_id: item.userid,
                            userid: this.state.userid,
                            usertype: this.state.usertype,
                            subject_name: this.state.student_list.subject_name
                            })}
                        />
                        )}
                        keyExtractor={item => item.userid}
                        ItemSeparatorComponent={this.renderSeparator}
                        
                    />
                    </List>
                    </View>
                </Container>
            );
        }
    }
export default TeacherSubjectSingle;

const styles = StyleSheet.create({
    container:{
    flex:1,
    alignItems:'center',
    justifyContent:'center'
    }
});

this is the code for the same, I have created a function checkItem()for the same and it is working, the only problem is, when I click on the first item, it will output the blank array, I select the second item and it will return the array with first item and so on. Please help me resolve it, thanks in advance

The output is currently in Console, I want to transfer that comma separated array to the next screen for further process — Kedar Dave
– Kedar Dave, Commented Jul 17, 2018 at 4:35

Mayank Shukla · Accepted Answer · 2018-07-17 05:00:40Z

2

Its because you are printing this.state.checked value just after the setState, setState is async, it will not immediately update the state value. You can use setState callback method to check the updated state values.

Write it like this:

checkItem = (item) => {
    const { checked } = this.state;
    let newArr = [];

    if (!checked.includes(item)) {
        newArr = [...checked, item];
    } else {
      newArr = checked.filter(a => a !== item);
    }
    this.setState({ checked: newArr }, () => console.log('updated state', newArr))
};

Check this answer for more details about setState:

Why calling setState method doesn't mutate the state immediately?

edited Jul 17, 2018 at 5:00

answered Jul 17, 2018 at 4:40

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prashant Pimpale · Accepted Answer · 2018-07-17 06:05:59Z

2

Try below code:

  checkItem = (e) => {
   let alreadyOn = this.state.checked; //If already there in state

    if (e.target.checked) {
      alreadyOn.push(e.target.name); //push the checked value
    } else {
       //will remove if already checked
      _.remove(alreadyOn, obj => {
        return obj == e.target.name;
      });
    }
    console.log(alreadyOn)
    this.setState({checked: alreadyOn});
}

edited Jul 17, 2018 at 6:05

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Jul 17, 2018 at 4:49

Krina Soni

9306 silver badges14 bronze badges

2 Comments

Krina Soni Over a year ago

onPress={() => this.checkItem(this,item.userid)} Try this way

Kedar Dave Over a year ago

never mind I already have got the solution from @Mayank Shukla and it is working

Ronnie Smith · Accepted Answer · 2018-07-17 04:45:47Z

0

Like this, with an event listener and the .push method of an array.

var checkboxes = document.querySelectorAll('input[type=checkbox]'); 
var myArray = [];
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener("click", function(e) {
      myArray.push(e.target.value);
      console.log(myArray);
    });
};

<div>
    <input type="checkbox" name="feature" value="scales" />
    <label >Scales</label>
</div>

<div>
    <input type="checkbox" name="feature" value="horns" />
    <label >Horns</label>
</div>

<div>
    <input type="checkbox" name="feature" value="claws" />
    <label >Claws</label>
</div>

answered Jul 17, 2018 at 4:45

Ronnie Smith

18.8k7 gold badges90 silver badges99 bronze badges

1 Comment

Kedar Dave Over a year ago

this is for react native not for react js but thanks for your time :)

Collectives™ on Stack Overflow

Add value of checkbox to an array when it is clicked

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related