How can I store an API call response as an object or parse an array as a JSON?

My app is trying to make an API call and display the data from it in a modal. It isn't working because I'm storing the response from the API call as an array at the moment, meaning I can't access the sub-elements of the response.

My question, then: is there some way to either:

  • Store an object using State so that I can conveniently reference parts of that object?


  • Parse an array as a JSON so I can take the data from the response and process it as a JSON when needed?

I realise this is kind of a weird question, so any answer that would achieve the same result would also be great.

Here's my code:

const DrinkPopup = (props) => {

  let [drinkDetails,setDrinkDetails] = useState([])
  let selectedDrinkId = props.drink

  const getDrinkAsync = async (selectedDrinkId) => {
    try {
      let response = await fetch(''+selectedDrinkId);
      let data = await response.json();
      return true;
    } catch (error) {

  useEffect (() =>  { 

    <Modal isVisible={props.modalVisible}
    onBackdropPress={()=>{props.setModalVisible(false)}} //allows closing modal by tapping outside it or back button
      <View style={styles.infocard}>
          <View style={styles.titleBox}>
            <Text style={styles.header}>{drinkDetails.idDrink}</Text>



Read more here:

Content Attribution

This content was originally published by Swystem at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: