score:1

Accepted answer

First.

The Table.js component need to know the data to display.
1 - you have to save result of the query in component state, by calling this.setState({tableData: tableList}) in query callback:

db.query("SHOW TABLES",(err,data)=>{
  const tableList = data;
  this.setState({
    tableData: tableList,
  });
})  

2 - you need to pass saved result as a property to TableContent, like this:

in Login.js:
{this.state.showComponent && <TableContent data={this.state.tableData} />};

3 - render data in the child component. You can get access to it via this.props.data. You can iterate over an result array and render all table rows in single loop. Take a look at this react doc.

Second:

Also Is there a possible to declare a variable global and access it across the another js files

In short - yes. You can export functions, variables, classess from your module.

Small example:

// scriptA.js;
export const a = 42;

// scriptB.js;
import { a } from 'path/to/scriptA.js';
console.log(a) // will print 42;

This example assumes you are using es6 import/export feature. You can require it as well.

score:1

There are a number of strategies for communicating between components, but the easiest way (without using Flux or Redux) is to use a parent component to act as a mediator for the communication.

Basically, the parent passes a callback to one component that sets some state to pass down the the other component, for example:

Child creating data

class Child1 extends React.Component {
  constructor() {
    super()
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.props.setMessage("hello world")
  }

  render() {
    return <button onClick={this.handleClick}>say hello</button>
  }
}

Child using data

const Child2 = ({message}) => {
  return <p>{message}</p>
}

Parent

class Parent extends React.Component {
  constructor() {
    super()
    this.state = { message: "" }
  }

  render() {
    return (
      <div>
        <Child1 setMessage={(message) => this.setState({ message })} />
        <Child2 message={this.state.message} />
      </div>
    )
  }
}

If they can't be siblings, this pattern can get a bit strenuous, but can still be achieved by having the mediator component as the lowest common ancestor and passing the relevant props all the way down. At that point though, you may want to investigate Flux or Redux and externalising the state from the components entirely.


Related Query

More Query from same tag