how to render a nested object inside of an object in react js

I want to render an nested object inside of an object.I'm not sure if I'm saying it right but see it for yourself first.

I want to show the minimum_system_requirements objects.I mean graphics,os,storage etc.

Here is my code

 const Api = 'https://free-to-play-games-database.p.rapidapi.com/api/game'
    const [games,setGames] = useState([])

    const ApiCall = async() => {
        const data = await axios.get(Api,{
            params: {id: `${id}`},
            headers: {
                "X-RapidAPI-Key": "e45c2e2ba9msh04d74decbb1c499p1737fcjsn4f10ee599568",
                "X-RapidAPI-Host": "free-to-play-games-database.p.rapidapi.com"
              }
        })
        
        console.log(data.data)
        setGames(data.data)

    }
  useEffect(() => {
    ApiCall()
  },[])

return (
    <>
    <div className={themeSwitch ? 'Main-Bg-Container-light' : 'Main-Bg-Container-dark'}>
       <div className='GameInfo'>
        <div className='GameInfo-Top'>
           <h1 className={themeSwitch ? null : 'GameInfoP'}>{games.title}</h1>
           <img id='GameInfoImg' src={games.thumbnail}  alt=''/>
           <p className={themeSwitch ? null : 'GameInfoP'}>Description: {games.short_description}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Genre: {games.genre}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Platform: {games.platform}</p>
           <div className='Download-Container'>
           <a id={themeSwitch ? 'GameInfoLink-light' : 'GameInfoLink-dark'} href={games.game_url} target='_blank' rel='noopener noreferrer'>Download</a>
           </div>
        </div>
        <div className='GameInfo-Side'>
            <div className='GameInfo-Side-Title'>
           <h3 className={themeSwitch ? null : 'GameInfoP'}>Minimum System Requirements</h3>
            </div>
            <div className='GameInfo-Side-Text'>
           <p className={themeSwitch ? null : 'GameInfoP'}>Graphics: 
           
           </p>   
           <p className={themeSwitch ? null : 'GameInfoP'}>Memory: </p>
           <p className={themeSwitch ? null : 'GameInfoP'}>OS: </p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Processor: </p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Storage: </p>
            </div>
        </div>
       </div>
    </div>
    </>
  )

I tried doing this in console.log and it worked but I don't know how to show it

 const ApiCall = async() => {
        const data = await axios.get(Api,{
            params: {id: `${id}`},
            headers: {
                "X-RapidAPI-Key": "e45c2e2ba9msh04d74decbb1c499p1737fcjsn4f10ee599568",
                "X-RapidAPI-Host": "free-to-play-games-database.p.rapidapi.com"
              }
        })
        
        console.log(data.data.minimum_system_requirements.graphics)
        setGames(data.data)

    }
  useEffect(() => {
    ApiCall()
  },[])

Solution

It sounds like you want to take that data, and put it in your JSX template. Assuming that's the case, should be as simple as how you displayed other values in your template like

<p className={themeSwitch ? null : 'GameInfoP'}>Platform: {games.platform}</p>

I think your return statement should look like

return (
    <>
    <div className={themeSwitch ? 'Main-Bg-Container-light' : 'Main-Bg-Container-dark'}>
       <div className='GameInfo'>
        <div className='GameInfo-Top'>
           <h1 className={themeSwitch ? null : 'GameInfoP'}>{games.title}</h1>
           <img id='GameInfoImg' src={games.thumbnail}  alt=''/>
           <p className={themeSwitch ? null : 'GameInfoP'}>Description: {games.short_description}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Genre: {games.genre}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Platform: {games.platform}</p>
           <div className='Download-Container'>
           <a id={themeSwitch ? 'GameInfoLink-light' : 'GameInfoLink-dark'} href={games.game_url} target='_blank' rel='noopener noreferrer'>Download</a>
           </div>
        </div>
        <div className='GameInfo-Side'>
            <div className='GameInfo-Side-Title'>
           <h3 className={themeSwitch ? null : 'GameInfoP'}>Minimum System Requirements</h3>
            </div>
            <div className='GameInfo-Side-Text'>
           <p className={themeSwitch ? null : 'GameInfoP'}>Graphics: {games.minimum_system_requirements.graphics}
           </p>   
           <p className={themeSwitch ? null : 'GameInfoP'}>Memory: {games.minimum_system_requirements.memory}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>OS: {games.minimum_system_requirements.os}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Processor: {games.minimum_system_requirements.processor}</p>
           <p className={themeSwitch ? null : 'GameInfoP'}>Storage: {games.minimum_system_requirements.storage}</p>
            </div>
        </div>
       </div>
    </div>
    </>
  )

Also, if you happen to have issues with "TypeError: Cannot read property ___ of undefined" in console, try optional flags like games?.minimum_system_requirements?.storage