The required output is attached below in this question. This code gives the correct result.

import React from 'react';
    const sampleJSON = {
      "object":{
        "id": 1,
        "name": "user1",
        "email": "user1@gmail.com",
      }
    }
    
    function App() {
    
      return (
        <div>
          {
            Object.keys(sampleJSON.object).map((key, i) => (
              <p key={i}>
                <span> {key}</span>
                <span> {sampleJSON.object[key]}</span>
              </p>
            )
         ) }
        </div>
      )
    }
    
    export default App;

Here, in the below code, I have used nested object inside the samplejson. But I could not able to display it on the webpage. What code changes should I make to display nested object in my webpage. Even if I add two or more nested objects inside samplejson, it should display in my webpage.

    import React from 'react';
    
    const sampleJSON = {
  "object":{
    "id": 1,
    "name": "user1",
    "email": "user1@gmail.com",
    "job": {
      "role": "Front end developer",
      "experience": "1 year"
    },
    "location": {
      "city": "Chennai"
    }
  }
}

function App() {

  return (
    <div>
      {
        Object.keys(sampleJSON.object).map((key, i) => (
          <p key={i}>
            <span> {key}</span>
            <span> {sampleJSON.object[key]}</span>
          </p>
        )
     ) }
    </div>
  )
}

export default App;

The output should be like this,