sunnynegi/.jsx

## .jsx
import React, { Component } from 'react';
import {
      StyleSheet,
      Text,
      View,
      ScrollView,
      Image,
      Dimensions,
      ListView,
      ToastAndroid
    } from 'react-native';

import {
	Container,
	Header,
	Title,
	Content,
	Button,
	Icon,
	List,
	ListItem,
	CheckBox,
	Left,
	Right,
	Body,
	Footer,
	FooterTab,
} from 'native-base'

import Contacts from 'react-native-contacts';
import { BACKEND_URL } from '../../config.js'
import axios from 'axios';

class GuestList extends Component{

	constructor(props){
		super(props);
		this.state = {
	      contactList: [],
	      Createguest:[],
	      contactToAdd:{}

		}
		this.arrayvar = []
		this.toggleSwitch = this.toggleSwitch.bind(this)
	}


	componentWillMount() {
		const {state} = this.props.navigation;
		const contactList = state.params ? state.params.contactList : null;
		this.setState({
			contactList:contactList
		})
	}

	toggleSwitch(data) {
		var ththis = this;

		let contactList = this.state.contactList.map(function(item){
			if(item.id == data.id){
				item.checked = item.checked ? false : true;
				if(item.checked){
					ththis.arrayvar.push({'eventId': '59cb3cf571016e197afa5daa','firstName':item.givenName,'lastName':item.familyName,'email':item.emailAddresses[0],'phoneNumber':item.phoneNumbers[0]});
				} else{
					var index = ththis.arrayvar.indexOf(data);
					ththis.arrayvar.splice(index, 1);
				}
			}
			return item;
		})
		this.setState({
			Createguest: this.arrayvar
		})
		this.setState({
			contactList: contactList
		})
	}

	addContacts = () => {
	    this.setState(
	      {
	        contactToAdd:this.state.Createguest
	      },
	      () => {
	      	console.log("this.state.Createguest",this.state)
	        axios.post(BACKEND_URL+'/api/Guest/createGuest',this.state.contactToAdd)
		    .then(function (response) {
		      if(response.status == 201){
		        ToastAndroid.show('Guest Successfully Added', ToastAndroid.SHORT);
		        thfis.props.navigation.navigate('Budget')
		      }
		    })
		    .catch(function (error) {
		      console.log(error);
		    });
	      }
	    );
  	};

	// addContacts() {
	// 	this.setState({
	// 		contactToAdd:this.state.Createguest
	// 	})
	// 	console.log("this.state.Createguest",this.state.contactToAdd)
	// 	axios.post(BACKEND_URL+'/api/Guest/createGuest',this.state.contactToAdd)
	//     .then(function (response) {
	//       if(response.status == 201){
	//         ToastAndroid.show('Guest Successfully Added', ToastAndroid.SHORT);
	//         thfis.props.navigation.navigate('Budget')
	//       }
	//     })
	//     .catch(function (error) {
	//       console.log(error);
	//     });
	// }

	render() {
		return(
			<Container>
				<Header>
					<Left>
						<Button
			            transparent
			            onPress={() => this.props.navigation.goBack()}
			            >
			            <Icon name="md-arrow-back" />
			            </Button>
					</Left>
					<Body>
						<Title>Select Contacts</Title>
					</Body>
					<Right/>
				</Header>
				<Content>

					<List>
						{this.state.contactList.map(item =>
						<ListItem  button onPress={() => this.toggleSwitch(item)} >
							<Body>
								<Text style={{ fontWeight: 'bold', fontSize: 16 }}> {item.givenName} </Text>
							</Body>
							<Right>
								<CheckBox checked={item.checked} onPress={() => this.toggleSwitch(item)} />
							</Right>
						</ListItem>
						)}
					</List>

				</Content>
				<Footer>
		          <FooterTab>
		            <Button active={true} onPress={() => this.addContacts()}>
		              <Text style={{ color:'white' }}>Add</Text>
		            </Button>
		          </FooterTab>
	        	</Footer>
			</Container>
		)
	}
}

export default GuestList
	import React, { Component } from 'react';
	import {
	StyleSheet,
	Text,
	View,
	ScrollView,
	Image,
	Dimensions,
	ListView,
	ToastAndroid
	} from 'react-native';

	import {
	Container,
	Header,
	Title,
	Content,
	Button,
	Icon,
	List,
	ListItem,
	CheckBox,
	Left,
	Right,
	Body,
	Footer,
	FooterTab,
	} from 'native-base'

	import Contacts from 'react-native-contacts';
	import { BACKEND_URL } from '../../config.js'
	import axios from 'axios';

	class GuestList extends Component{

	constructor(props){
	super(props);
	this.state = {
	contactList: [],
	Createguest:[],
	contactToAdd:{}

	}
	this.arrayvar = []
	this.toggleSwitch = this.toggleSwitch.bind(this)
	}


	componentWillMount() {
	const {state} = this.props.navigation;
	const contactList = state.params ? state.params.contactList : null;
	this.setState({
	contactList:contactList
	})
	}

	toggleSwitch(data) {
	var ththis = this;

	let contactList = this.state.contactList.map(function(item){
	if(item.id == data.id){
	item.checked = item.checked ? false : true;
	if(item.checked){
	ththis.arrayvar.push({'eventId': '59cb3cf571016e197afa5daa','firstName':item.givenName,'lastName':item.familyName,'email':item.emailAddresses[0],'phoneNumber':item.phoneNumbers[0]});
	} else{
	var index = ththis.arrayvar.indexOf(data);
	ththis.arrayvar.splice(index, 1);
	}
	}
	return item;
	})
	this.setState({
	Createguest: this.arrayvar
	})
	this.setState({
	contactList: contactList
	})
	}

	addContacts = () => {
	this.setState(
	{
	contactToAdd:this.state.Createguest
	},
	() => {
	console.log("this.state.Createguest",this.state)
	axios.post(BACKEND_URL+'/api/Guest/createGuest',this.state.contactToAdd)
	.then(function (response) {
	if(response.status == 201){
	ToastAndroid.show('Guest Successfully Added', ToastAndroid.SHORT);
	thfis.props.navigation.navigate('Budget')
	}
	})
	.catch(function (error) {
	console.log(error);
	});
	}
	);
	};

	// addContacts() {
	// this.setState({
	// contactToAdd:this.state.Createguest
	// })
	// console.log("this.state.Createguest",this.state.contactToAdd)
	// axios.post(BACKEND_URL+'/api/Guest/createGuest',this.state.contactToAdd)
	// .then(function (response) {
	// if(response.status == 201){
	// ToastAndroid.show('Guest Successfully Added', ToastAndroid.SHORT);
	// thfis.props.navigation.navigate('Budget')
	// }
	// })
	// .catch(function (error) {
	// console.log(error);
	// });
	// }

	render() {
	return(
	<Container>
	<Header>
	<Left>
	<Button
	transparent
	onPress={() => this.props.navigation.goBack()}
	>
	<Icon name="md-arrow-back" />
	</Button>
	</Left>
	<Body>
	<Title>Select Contacts</Title>
	</Body>
	<Right/>
	</Header>
	<Content>

	<List>
	{this.state.contactList.map(item =>
	<ListItem button onPress={() => this.toggleSwitch(item)} >
	<Body>
	<Text style={{ fontWeight: 'bold', fontSize: 16 }}> {item.givenName} </Text>
	</Body>
	<Right>
	<CheckBox checked={item.checked} onPress={() => this.toggleSwitch(item)} />
	</Right>
	</ListItem>
	)}
	</List>

	</Content>
	<Footer>
	<FooterTab>
	<Button active={true} onPress={() => this.addContacts()}>
	<Text style={{ color:'white' }}>Add</Text>
	</Button>
	</FooterTab>
	</Footer>
	</Container>
	)
	}
	}

	export default GuestList