How to display array of objects in table getting dynamically from backend in ReactJS

You will probably want to store the object you are getting from your backend in a useState hook. You will also want to track how many fields the user has selected with a useState hook. Something like this:

const [data, setData] = useState(null); // no initial data
const [fields, setFields] = useState(2); // 2 initial fields selected

Now you can update the fields state with a method within your function that gets called every time the value changes. Then you want to query your backend with a useEffect hook and pass in the new field value from the backend.

const updateFields = (event) => {
  setFields(event.target.value);
}

useEffect(() => {
  axios.get(`backend/api/?fields=${fields}`)
    .then(res => {
      setData(res.body);
    })
});

As per the comment, if you're not using hooks, you can use ComponentDidMount instead of useEffect and create a similar update method.

const updateFields = (event) => {
  this.setState({ fields: event.target.value });
}

componentDidMount() {
  axios.get(`backend/api/?fields=${fields}`)
    .then(res => {
      this.setState({ data:  res.data });
  })
}

Now you can return JSX that has a field to set the field number as well as map through the data object to set a dynamic table of values. If you're not using hooks, place the this keyword to reference state (i.e. this.data instead of data).

return (
  <input onChange={(e) => updateFields(e)} />

  <table>
    <thead>
      {Object.keys(data[0]).map((el) => {
        <th key={el}>{el}</th>
      })
    </thead>
    <tbody>
      {data.map((el, i) => {
        {Object.keys(data[i]).map((elKey) => <td key={elKey}>{el[elKey]}</td>)}
      }
    </tbody>
  </table>
</div>
);

These are two great resources for understanding more about querying data:

https://reactjs.org/docs/hooks-effect.html

https://alligator.io/react/axios-react/

And this is a good resource for understanding more about mapping over objects in React:

https://reactjs.org/docs/lists-and-keys.html

How about conditionally rendering the cells? Like:

data.map(item => (
    {item.age? <td>{item.age}</td>: null}
))

Every time user selects fields, store the field name in a variable. Ex:

const Header = [{"title":"Name","index":"name"}]

Make sure the key matches with the array index which you get from server(API).

Then create anew component for rendering table and pass data and headers to that as props

Then extract the headers to an array and before rendering data, just check if the specific value exists

const viewTable = (props) => { 
    const index = []; 
    const header = props.header.map((heading) => { 
        index.push(heading.index); 
        return <th key={heading.index}>{heading.title}</th> 
    }); 

    const tableData = props.data.map((data, key) => { 
        return <tr>
             {index.map(key => {
                 if (index.indexOf(key) > -1) {
                     return <td>{row[key]}</td>;
                 }
             })}
          </tr>
    }) ; 

    return ( 
        <table cellSpacing={30} cellPadding={5}> 
            <thead> 
                <tr> 
                    {header} 
                </tr> 
            </thead> 
            <tbody> 
                {tableData} 
            </tbody> 
        </table> 
    ); 
} 

export default viewTable;