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 ( { Object.entries(companyData.accounts) .map(([company, accountData]) => ( {company}{accountData.id} { storeJson(JSON.stringify(company),JSON.stringify(accountData.id))} )) } ); }
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.
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 ( {Object.entries(companyData.accounts).map(([company, accountData]) => ( {company} {accountData.id} ))} ); }; export default App;