React Native implementation method of storing JSON values ​​as key-value pairs

Question

I am displaying company name and ID from json stored in companyData and storing them as key and value simultaneously using async storage in React Native. I got the following error, so I used JSON.stringify to convert both values ​​to strings before storing them as key value pairs, but I still got the same error

[Error: Object cannot be made a React child (found object with keys {_h, _i, _j, _k}). If you want to render a group of child elements, use an array instead. ]

I want to store them as key value pairs so that I can use the values ​​in another component. Any help is greatly appreciated

const companyDatas = {
        "accounts": {
            "company 1 ": {
                "id": "4",
                "enabled": "1"
            },
            "company 2": {
                "id": "2",
                "enabled": "1"
            },
            "company 3": {
                "id": "1",
                "enabled": "1"
            }
        }
      };
    
     const storeJson = async (value1,value2) => {
      try {
        await AsyncStorage.setItem(value1,value2);
       
      } catch (e) {
        // saving error
      }
    };
    
      const [companyData, setCompanyData] = useState(companyDatas)
    
      return (
        <View style={styles.container}>
          {
            Object.entries(companyData.accounts)
            .map(([company, accountData]) => (
              <View key={company}>

                <Text style={[styles.textRoad, styles.capital]}>{company}{accountData.id}</Text>
                     { storeJson(JSON.stringify(company),JSON.stringify(accountData.id))}

                
              </View>
            ))
          }
        </View>
      );
    }

Answer 1

Do not use the storeJson function in JSX. Because every rendering of the component will run your storeJson function again. You can add a button to store data. Or you can add this function to useEffect. You need to make sure this function only runs once.

{_h, _i, _j, _k}) indicates that the data is still a promise and has not yet been resolved. You can use an async function to pass it.

Answer 2

You can move the call to the storeJson function outside of JSX, perhaps using the side effect function useEffect to manage it.

const companyDatas = {
  accounts: {
    "company 1 ": {
      id: "4",
      enabled: "1",
    },
    "company 2": {
      id: "2",
      enabled: "1",
    },
    "company 3": {
      id: "1",
      enabled: "1",
    },
  },
};

const storeJson = async (value1, value2) => {
  try {
    await AsyncStorage.setItem(value1, value2);
  } catch (e) {
    
  }
};

const App = () => {
  const [companyData, setCompanyData] = useState(companyDatas);

  useEffect(() => {
    Object.entries(companyData.accounts).forEach(([company, accountData]) => {
      storeJson(JSON.stringify(company), JSON.stringify(accountData.id));
    });
  }, [companyData]);

  return (
    <View style={styles.container}>
      {Object.entries(companyData.accounts).map(([company, accountData]) => (
        <View key={company}>
          <Text style={[styles.textRoad, styles.capital]}>
            {company}
            {accountData.id}
          </Text>
        </View>
      ))}
    </View>
  );
};

export default App;