TLDR: i need to create a new object based on the selection from a switch on/off, if i click on, that specific project item is cloned to this new object, and so on
I've been suffering from a headache trying to figure it out this, i got an object with projects/clients, something like this.
items = [ { client: 'Microsoft', idClient: 0, idProjectType: 1, projectType: 'traditional', title: 'React Native App' }, { client: 'Amazon', idClient: 1, idProjectType: 1, projectType: 'traditional', title: 'ServerSide OPS' }, { client: 'Microsoft', idClient: 0, idProjectType: 1, projectType: 'traditional', title: 'AI Enhancer' }, { client: 'Google', idClient: 4, idProjectType: 1, projectType: 'traditional', title: 'Whatever Come Up With' }, { client: 'KFC', idClient: 3, idProjectType: 1, projectType: 'traditional', title: 'QR Reader' }, ]This is just an example of my object, it has over 20 clients and some of these can have around 3 or 4 projects each, the whole object has around 60 to 70 items.
I got two screens, one which is the main, renders a calendar strip with custom views for each day, ok, here goes the interesting part, this is where my question goes from
The second screen is a dropdown menu where i select a client and list me all the projects based on that selected client, the huge problem is, since i'm unable to manipulate this object, first, i need a switch for each project, in order to select the ones i need to show on the first screen, and second, that new object needs to contain (aside from the item in the object), more stuff, like this {project: 'React Native App', hoursRemaining: 10, etc...}
here is the full code of the dropdown list screen
import * as React from 'react';import {View, Text, Image, StatusBar, SafeAreaView, TouchableOpacity, ScrollView, RefreshControl, FlatList, Platform} from 'react-native';import { Header, ListItem } from 'react-native-elements';import ModalDropdown from 'react-native-modal-dropdown';import Images from '../../Assets/values/images';import { RFPercentage as rfp, RFValue as rfv } from 'react-native-responsive-fontsize';import { heightPercentageToDP as hp, widthPercentageToDP as wp } from 'react-native-responsive-screen';import styles from '../../Assets/values/styles/HoursReport/ClientsProyects/ClientsProyectsStyle';import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';import DataManager from '../../../Util/CrossUtils/DataManager';export default class ClientsProyectsScreen extends React.Component<any, any> { constructor(props: any) { super(props); this.state = { SeleccionClientes: '', } } items = [ { client: 'Microsoft', idClient: 0, idProjectType: 1, projectType: 'traditional', title: 'React Native App' }, { client: 'Amazon', idClient: 1, idProjectType: 1, projectType: 'traditional', title: 'ServerSide OPS' }, { client: 'Microsoft', idClient: 0, idProjectType: 1, projectType: 'traditional', title: 'AI Enhancer' }, { client: 'Google', idClient: 4, idProjectType: 1, projectType: 'traditional', title: 'Whatever Come Up With' }, { client: 'KFC', idClient: 3, idProjectType: 1, projectType: 'traditional', title: 'QR Reader' }, ] componentDidMount(){ console.log(DataManager.ResponseProjectClient); } searchCliente = item => { var jsonData = item; var searchData = []; jsonData.forEach(element => { searchData.push(element.cliente); }); return searchData; } searchProyecto = item => { } updateFav = item => { const newData = [...this.items[this.state.SeleccionClientes]]; const updateItem = newData.find(x => x.key === item.key); updateItem.fav = !item.fav; const updatedArray = Object.assign(this.items); updatedArray[this.state.SeleccionClientes] = newData; this.setState({ items: updatedArray }); }; render() { return (<><StatusBar translucent backgroundColor="transparent" /><SafeAreaView style={{backgroundColor: '#fafafa'}}/> {/*<Header backgroundImage={Images.header_nav} backgroundImageStyle={styles.HeaderImagenCP} leftComponent={<TouchableOpacity onPress={() => this.props.navigation.goBack()}><View><Image style={styles.HeaderHorizontal} source={Images.back}/></View></TouchableOpacity> } centerComponent={{text: 'Imputar horas', ellipsizeMode: 'clip', style: styles.HeaderHoursReportCP }} placement='center' /> */}<View style={styles.ContainerBackground}><View style={{flexDirection: 'row'}}><View style={{alignItems: 'flex-start', justifyContent: 'flex-start', alignSelf: 'flex-start', marginTop: hp('2.2%'), marginLeft: wp('6.3%')}}><Text style={{ fontSize: rfv(18), fontWeight: "500", fontStyle: "normal", textAlign: "left", color: "#707070" }}>Proyectos</Text></View><TouchableOpacity style={{position: 'absolute', alignItems: 'flex-end', justifyContent: 'flex-end', alignSelf: 'flex-end', paddingBottom: hp('1%'), left: wp('90%')}} onPress={() => this.props.navigation.goBack()}><Image source={Images.close_modal}/></TouchableOpacity></View><KeyboardAwareScrollView keyboardShouldPersistTaps="handled" enableOnAndroid={true}> {/*<View style={{alignItems: 'flex-end', justifyContent: 'flex-end', alignSelf: 'flex-end', marginRight: widthPercentageToDP('6.3%')}}><TouchableOpacity onPress={() => this.props.navigation.goBack()}><Image source={Images.close_modal}/></TouchableOpacity></View> */}<View style={styles.Left}><Text style={styles.TituloInputOnBlur}>Cliente</Text></View><View style={styles.Center}><ModalDropdown adjustFrame={style => { style.top =(Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight); return style; }} dropdownTextStyle={styles.dropdownTextStyle} dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle} dropdownStyle={styles.dropdownStyle} defaultValue={'Seleccionar'} style={styles.dropStyle} textStyle={{ padding: 0, margin: 0, fontSize: rfv(16), paddingVertical: hp('1.2%'), fontWeight: 'normal', fontStyle: 'normal', textAlign: 'left', }} //onSelect={(index, value) => this.setState({SeleccionClientes: value})} //options={Object.keys(this.state.items)} onSelect={(index, value) => this.setState({SeleccionClientes: value})} options={Object.keys(this.items)} /></View><View> { this.items[this.state.SeleccionClientes] != null ?<View> {<FlatList data={this.items[this.state.SeleccionClientes]} renderItem={({item, index}) => (<ListItem containerStyle={{backgroundColor: '#fafafa', width: wp('87.1%'), height: 64, alignItems: 'center', justifyContent: 'center', alignSelf: 'center', marginTop: hp('2.8%'), paddingHorizontal: 0}} topDivider={false} bottomDivider={true} titleStyle={{ marginLeft: 0, fontSize: rfv(16), fontWeight: "normal", fontStyle: "normal", textAlign: "left", color: "#707070" }} subtitleStyle={{ marginLeft: 0, fontSize: rfv(14), fontWeight: "normal", fontStyle: "normal", textAlign: "left", color: "#c4c4c4" }} title={`${item.name}`} subtitle={`ID ${item.key}`} switch={{ trackColor: { false: "#767577", true: "#81b0ff" }, thumbColor: item.fav == true ? "#1062cc" : "#f4f3f4", ios_backgroundColor: "#9e9e9e", value: item.fav, onValueChange: () => this.updateFav(item) }} /> )} /> }</View> :<View style={{alignItems: 'center', justifyContent: 'center', alignSelf: 'center'}}><View style={{marginTop: hp('11%')}}><Image style={{marginBottom: hp('2.8%')}} source={Images.sad_face}/></View><Text style={{ fontSize: rfv(18), fontWeight: "normal", fontStyle: "normal", textAlign: "left", color: "#c4c4c4" }}>Sin proyectos activos</Text></View> }</View><View style={styles.BottomPush} /></KeyboardAwareScrollView></View></> ); }}