Question 232667 in React native Question posted in
The official React Native documentation can be found here.

how to store json value as key value in react native?

I am displaying both company name as well as id from json stored in companyData and at the same time i am storing them as key and value using asynchronous storage in react native. I am getting below error ,so i convert both value to string using JSON.string before storing as key value in asyncstorage, but i am still getting same below error

[Error: Objects are not valid as a React child (found: object with
keys {_h, _i, _j, _k}). If you meant to render a collection of
children, use an array instead.]

i wish to store them as key value ,so that i can use those value in another component. any help would be highly 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>
      );
    }

I am displaying both company name as well as id from json stored in companyData and at the same time i am storing them as key and value using asynchronous storage in react native. I am getting below error ,so i convert both value to string using JSON.string before storing as key value in asyncstorage, but i am still getting same below error

[Error: Objects are not valid as a React child (found: object with
keys {_h, _i, _j, _k}). If you meant to render a collection of
children, use an array instead.]

i wish to store them as key value ,so that i can use those value in another component. any help would be highly 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>
      );
    }
Tags:

2

Answers


  1. 0

    don’t use storeJson function in JSX. Cause this way every render of component will run your storjeJson function again and again. May you can add a button to store the data. Or you can add this function in useEffect. You need to ensure this function will run one time.

    {_h, _i, _j, _k}) means the data is still in promise and not resolve yet. You can pass this with async function.

    Login or Signup to reply.
  2. 0

    you can move the call to storeJson outside of the JSX and perhaps use a side effect like useEffect to manage this.

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search