a guy helped me with this code
import React, { useEffect, useState } from "react";import _ from "lodash";// const SeleccionClientes = "";const 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: "KFC", idClient: 2, idProjectType: 4, projectType: "traditional", title: "QR Reader" }, { client: "KFC", idClient: 2, idProjectType: 1, projectType: "traditional", title: "React Native App" }, { client: "KFC", idClient: 2, idProjectType: 1, projectType: "traditional", title: "React KKL" }, { client: "PEICI", idClient: 3, idProjectType: 1, projectType: "traditional", title: "KuKluxKlan" }];export default function ListView() { const [list, setList] = useState(items); const [idClient, setIdClient] = useState(2); const displayProjectsForClient = idClient => { return list.filter(item => item.idClient === idClient); }; const displayedProjects = displayProjectsForClient(idClient); // equivalent to componentDidMount() useEffect(() => { setList(displayedProjects); }, []); const updateFav = (val, ind) => { const tempData = _.cloneDeep(list); tempData[ind].fav = val; setList(tempData); }; const favItems = _.filter(list, item => item.fav); const finalObject = { [new Date().toISOString()]: favItems }; return (<div> Selected Client: "KFC"<br /> Add Favorite Projects: {displayedProjects.map((item, index) => { return (<div key={index} style={{ margin: "5px", padding: "5px", background: "#D6D6D6" }}><div>{item.title}</div> {`Project ID ${item.idProjectType}`}<input type="checkbox" value={item.fav} onChange={e => updateFav(e.target.checked, index)} /></div> ); })}<div> Active projects (final object): <br /> {JSON.stringify(finalObject, null, 2)}</div></div> );}instead of input checkbox, i'm using the react-native-elements switch, but is not working, i'm assuming is due to a non existing fav inside the item object
this is my code
<FlatList data={dataSource} 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.title}`} subtitle={`ID ${item.idCliente}`} switch={{ trackColor: { false: "#767577", true: "#81b0ff" }, thumbColor: item.fav == true ? "#1062cc" : "#f4f3f4", ios_backgroundColor: "#9e9e9e", value: item.fav == undefined ? false : true, onValueChange: () => {e => console.log(updateFav(e.target.checked == undefined ? false : true, index))} }} /> )} />the idea is to list the projects, which is doing, but when i click on a switch, it creates a whole new object based on that "selection", problem is, the switches are getting to the original position immediately,
forgot to mention, this is the function
const updateFav = (value, index) => { const tempData = _.cloneDeep(dataSource); tempData[index].fav = value; setDataSource(tempData); }; const favItems = _.filter(dataSource, item => item.fav);