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, Jul 17 '18 at 04:35

Mayank Shukla · Accepted Answer · 2018-07-17T05:00:40.503

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?

score 2 · Answer 2 · edited Jul 17 '18 at 06:05

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 '18 at 06:05

Prashant Pimpale

10,349
9
44
84

answered Jul 17 '18 at 04:49

Krina Soni

870
6
14

onPress={() => this.checkItem(this,item.userid)} Try this way – Krina Soni Jul 17 '18 at 05:02
never mind I already have got the solution from @Mayank Shukla and it is working – Kedar Dave Jul 17 '18 at 05:17

score 0 · Answer 3 · answered Jul 17 '18 at 04:45

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>

this is for react native not for react js but thanks for your time :) — Kedar Dave, Jul 17 '18 at 05:01

Add value of checkbox to an array when it is clicked

3 Answers3