How to pass array of data from one component to another component in reactjs

Here's how I would suggest to structure it:

var tableNames = [ DataService.getTableNames() ]; // Data returned by the function is the placed inside a new `[]`

If DataService.getTableNames() itself returns an array then you can directly assign it to tableNames like below:

var tableNames = DataService.getTableNames(); // no need to wrap that inside another []

Once you have that cleared, passing the array to the child component would be like below:

<DataQueryInterface tableNames={tableNames}/> 

In the child component you destructure like below:

var { tableNames } = props;
// tableNames now contains reference to passed on `[]` from parent.

Note props is an object that contains property names tableNames which contains reference to an array.

If DataService.getTableNames() returns an array, you should just assign it like this var tableNames = DataService.getTableNames(); and then pass it to the component <DataQueryInterface tableNames={tableNames}/>.

Here is a simple example given what we know about the needs:

class DataService {
  getTableNames() {
    return ['John', 'Doe'];
  }
}
class Child extends React.Component {
  render() {
    const tableNames = this.props.tableNames;
    console.log('child names', tableNames)
    return (<div>{tableNames}</div>);
  }
}
class Parent extends React.Component {
  constructor() {
    super();
    const service = new DataService();
    this.tableNames = service.getTableNames();
    console.log('parent names', this.tableNames);
  }

  render() {
    return (<Child tableNames={this.tableNames}/>);
  }
}

React.render(<Parent />, document.getElementById('app'));

And here is a working jsfiddle as well https://jsfiddle.net/Lh54mfwa/