Accessing the data from one component to another component

Question

Hi I am starting to learn reactjs. So after understanding the basics Im starting to work on database connectivity using reactjs. In the code Im trying to get the userId and Password to establish a DB connectivity and trying to list the tables available in the DB. In the Login.js I have create a form (userId and Password) when login button is clicked I will make a connectivity and execute the Show Table query to list all the tables in the DB, and move to the Table.js page where I try to list the available tables. Right now I able to connect to the DB but not able to display the tables in the Table.js, so how to display the tables list in the Table.js file, because I have placed my DB connectivity and query inside a button event in the Login.js. Also Is there a possible to declare a variable global and access it across the another js files. Any help would be great, thank you.

Login.js

import React from 'react';
import TableContent from './tables';
class Login extends React.Component{
    constructor(){
        super();
        this.state={
            showComponent : false,
        };
        // this.buttonClick = this.buttonClick.bind(this);
    }

    buttonClick(event){
        event.preventDefault();
        this.setState({
            showComponent: true,
        })

        var db = require('@dataBase/dynamoConnect')({
            "UserId": "XXXXXXXXXXXXXXXXXXXXXXXX",
            "Password": "YYYYYYYYYYYYYYY",
            "region": "ZZZZZZZZZZ"
        });
        db.query("SHOW TABLES",(err,data)=>{
        const tableList = data;
        console.log(tableList);
        })
    }
    render(){
        return(
            <div>
                <form>
                    <label>User Id :</label>
                    <input type="text" className="test"/>
                    <br/>
                    <label>Password :</label>
                    <input type="text" className="test" />
                    <button onClick={this.buttonClick.bind(this)} className="connect" > Login</button>
                  </form>
                 {this.state.showComponent && <TableContent />}
            </div>  
        )
    }
}

export default Login;

Table.js

import React from 'react';

class TableContent extends React.Component {
    constructor() {
        super();
        this.state = {
            showComponent: false,
        };
        this.buttonClick = this.buttonClick.bind(this);
    }

    buttonClick(event) {
        event.preventDefault();
        this.setState({
            showComponent: true,
        })
    }

    render() {
        return (
            <div>
                <form>
                 <div id="first">   
                <label> Table </label>
                <br />
                //Display the tables from DB here
                <select name="sometext" multiple="multiple" >
                    <option>Table1</option>
                    <option>Table2</option>
                    <option>Table3</option>
                    <option>Table4</option>
                    <option>Table5</option>
                </select>
                </div>
                <div id="second"> 
                <label> SQL </label>
                <br/>
                <textarea rows="4" cols="50">SQL </textarea>
                </div>
                <button onClick={this.buttonClick.bind(this)} > Execute </button> 
                <div id="third" >
                {this.state.showComponent && <SampleTable />}
                </div>
                </form>
            </div>
        )
    }
}

export default TableContent;

Answer 1

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.

Answer 2

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.