Someone assisted me in refining this code snippet
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 using the input checkbox, I opted for the react-native-elements switch component, but it doesn't seem to be functioning as expected. It appears that the issue may be related to the absence of a "fav" property in the item object.
This is the revised code section
<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 current implementation successfully lists the projects, but when I interact with a switch, it generates a fresh object based on that selection. Unfortunately, the switches revert to their original positions immediately.
I neglected to mention, here is the function definition
const updateFav = (value, index) => {
const tempData = _.cloneDeep(dataSource);
tempData[index].fav = value;
setDataSource(tempData);
};
const favItems = _.filter(dataSource, item => item.fav);