Access data from one component to another component

Question

Hi, I'm starting to study the reaction. Therefore, after understanding the basics, I begin to work with connecting to the database using reactjs. In the Im code trying to get userId and Password, establish a connection to the database and try to list the tables available in the database. In Login.js, I created a form (userId and Password) when I click the login button. I will make a connection and execute the Show Table query to list all the tables in the database and go to the Table.js page where I am trying to list the available tables. Right now I can connect to the database, but I could not display the tables in Table.js , therefore, how to display the list of tables in the Table.js file, because I placed my database connection and request inside the button event in Login.js. Also, is it possible to declare a global variable and access it through other js files. Any help would be great, thanks.

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

Firstly.

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

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

2 - you need to pass the saved result as a property to TableContent , for example:

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

3 - display data in a child component. You can access it through this.props.data . You can iterate over the array of results and display all the rows of the table in one cycle. Check out this edited document .

The second:

It is also possible to declare a global variable and access it through other js files

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

A 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 that you are using the es6 import / export function. You can also require .

Answer 2

There are several strategies for exchanging information between components, but the easiest way (without using Flux or Redux) is to use the parent component to act as an intermediary for communication.

Basically, a parent passes a callback to one component, which sets some state to transfer another component, for example:

Child making 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 cannot be brothers and sisters, this template can become a little stressful, but it can still be achieved if the intermediary component becomes the lowest common ancestor and passes the corresponding details to the end. At the same time, you can learn Flux or Redux and completely banish the state from the components.