How do i switch elements from object, when there are no initial state in the first place?

Question

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);

Answer 1

You are using a mixture of React (Html) and React native thats the problem. You will have to change your Switch like this for the function to work. And no need to check for true false as well.

   switch={{
        trackColor: { false: "#767577", true: "#81b0ff" },
        thumbColor: item.fav == true ? "#1062cc" : "#f4f3f4",
        ios_backgroundColor: "#9e9e9e",
        value: item.fav, 
        onValueChange: () => {updateFav(!item.fav, index)}
      }}