How to get value without knowing key in map function of react js

Object.entries will return all the properties and values as keys and values in array, Object.keys will return all the properties in array and Object.values will return all the values in array

this.state.response.map((data, i) => (
        <tr key={i}>
            <td>{i+1}</td>
            {
                console.log(Object.entries(data));
                Object.values(data).map(d => <td>{d}</td>);
            }
            <td></td>
        </tr>

Use method Object.keys() to get an array of keys in the given object

{
    this.state.response !== "" &&
    this.state.response.map((data, i) => (
        <tr key={i}>
            <td>{i+1}</td>
            {
                Object.keys(data) //Returns array of all keys: Array ["number", "name", "type", "contact"]
            }
            <td></td>
        </tr>
    ))
}

Object.values will loop through the number of values in the data and show them in td tag

this.state.response.map((data, i) => (
    <tr key={i}>
       <td>{i+1}</td>
       {Object.values(data).map(val => {
             return <td>{val}</td>;
           })
        }
    </tr>
));

To get the keys along with the values you'll have to use Object.entries.

    this.state.response.map((data, i) => (
        <tr key={i}>
           <td>{i+1}</td>
           {Object.entries(data).map(val => {
             return <div>
               <td>{val[0]}</td><td>{val[1]}</td>
               <br />
             </div>
               })
            }
        </tr>
    ))

You can get the keys from an object using Object.keys(object). After that you can loop through the keys and access each key on each object.

class ResponseTable extends React.Component {
  state = { 
    response: [{
      "number": "CA1",
      "name": "Kiran",
      "type": "Books",
      "contact": "98989898"
    }, {
      "number": "CA2",
      "name": "Rahul",
      "type": "MP3",
      "contact": "98989898"
    }]
  };
  
  render() {
    const keys = Object.keys(this.state.response[0]);
  
    return (
      <table>
        <thead>
          <tr>{keys.map(key => <th key={key}>{key}</th>)}</tr>
        </thead>
        <tbody>
          {this.state.response.map((item, index) => (
            <tr key={index}>
              {keys.map(key => <td key={key}>{item[key]}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(
  <ResponseTable />,
  document.querySelector("#response-table-container")
);

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="response-table-container"></div>

Note that this solution uses this.state.response[0] to determine the keys. If this array can be empty you might need to set up some sort of default, because this.state.response[0] will evaluate to undefined.

In this scenario one solution would be use an empty object as default:

Object.keys(this.state.response[0] || {})

Which will return an empty array if response is empty. But you could also render an message notifying the user of the empty results.

if (this.state.response.length == 0) {
  return <div>Nothing found</div>;
}

These are just examples and you'll have to determine yourself what you want to do in such a scenario. If this scenario never occurs you don't have to handle it.