React JS access states / props from another component

Question

I'm new to React, I am unable to access Login component state in Member component:

App.js:

export default React.createClass({
  getInitialState: function() {
    return {
               testp : ''
      }
  },
  componentDidMount() {    
      var abc = "asdadaddasad";
       this.setState({testp : abc})
  },
  render() {
        <div>
       <header>
            <div className="menu-trigger">
                <i className="fa fa-bars" aria-hidden="true"></i>
            </div>
            <div className="container">
                <ul className="fR clearfix">
                    <li><NavLink to="/" onlyActiveOnIndex>Home</NavLink></li>
                    <li><NavLink to="/members">Members</NavLink></li>
          <li><NavLink to="/register">Register</NavLink></li>
           <li><NavLink to="/login">Login</NavLink></li>
                </ul>
              </div>
        </header>
         <div className="content-row">
            <div className="container">
                 {this.props.children}
           </div>
        </div>
         </div>
   }
})

Login.js:

import React from 'react';
import Member from './Member';
var Login = React.createClass({
  getInitialState: function() {
    return {
      loginname : ''
    }
  },
  componentDidMount() {    
    var test = 'abc';
    this.setState({loginname : test});
  },
  render() {
    return <div>test</div>
  }
});
export default Login

Member.js:

import React from 'react';
import Login from './Login';

var Member = React.createClass({
  render() {
    return <div>{this.props.loginname}</div>
            <div>{this.props.prop11}</div>
           <div>{this.props.testp}</div>
  }
});
export default Member

How do I access Login component state in another JS file? Could anyone please help me figure this out?

Answer 1

Lifting State Up

If you need to use a given state in two different components, chances are that state should live in a parent component which then passes it to the two (or more) components that need to use it.

So basically for your example, you'll need a component e.g. App on a higher level than Login and Member which holds that state for you. That component then passes the state as a prop to Login and Member, and passes functions to call to change that state as props as well.

Pseudocode

App
  state.loginname = ''

  handleLoginnameChange(login) {
    this.setState(loginname: login)
  } 

  render () {
    <Login loginname={this.state.loginname}
           handleLoginnameChange={this.handleLoginnameChange} />

    <Member loginname={this.state.loginname} />
  }

Accessing the loginname state in child components

The above makes it so that the loginname state on parent component App is passed as a prop to the Login and Member components, in which they are accessible as this.props.loginname.

Modifying the loginname state from a child component

When in Login you need to modify the loginname, you call this.props.handleLoginnameChange(newLoginname) with the appropriate arguments (the new loginname value)

You're invited to read more on this on React's docs: Lifting State Up