How to parse a value that is not a string in rest api call?

See more:

REST

API

ReactJS

Hi Team

I am struggling to parse a value that is not a string in my rest api call and try to first initialize it as a const name['1080p','4k']; and when try to call it during my rest api as a name its not accessing that value object and im struck.

Meaning i want to do something like this

<pre lang="Javascript">{list?.product?.options?.1080p?.price?.value}

What I have tried:

<pre lang="Javascript">import React,{ useEffect, useState} from 'react';

  function Footer() {
  
      // we fetch rest api first before data gets loaded 
      // using loadAsync method to allow data be loaded and fetch it after.
      const[list, setList] = useState([]);
      const[error, setError] = useState([]);
      const[load, setLoaded] = useState([]);
      
      useEffect(() => {
       const loadAsyncStuff = async () => {
         try {
           const response = await fetch('https://fe-assignment.vaimo.net/');
           const json = await response.json();
           setList(json);
         } catch (error) {
           setError(error);
         } finally {
           setLoaded(true);
         }
       };
       loadAsyncStuff();
     },[]);


     const names = ['1080p'];

// returning our values as data from rest api
    // embedding some form-inline to allow spacing and new line.
   return (
     <div className="footer">

           <form  className='form-inline'>
           {list?.product?.discount?.amount}
           <p>Discount ends in</p>  {list?.product?.discount?.end_date}
           </form>
           <br/><br/>
           <form className='form-inline'>
           {list?.product?.options?.battery_accessories?.label}     
           {list?.product?.options?.battery_accessories?.price?.value}

}
);
}
export default Footer