title: How can you access the constant variables of one Component in another Component - React
body: <p>I am working on React Table. I am basically a beginner in React. I have a dashboard page where I display a React Table of 8 columns. I have a customize button which will open a popup page, this popup page has 8 check boxes allows me to show/hide those React columns. Initially all the check boxes in this popup page is set to true. When I uncheck a column that particular column get disabled.</p>
  
  <p>There are images in the end to see what I am trying to do.</p>
  
  <p>I will be using this logic for show hide columns (this question was asked by me two days back) - <a href="https://stackoverflow.com/questions/53638095/how-to-show-and-hide-some-columns-on-react-table">You can see how this is done using a React Table attribute/property called show</a>. When show is true that column/sub column is shown and When show is false that column/sub column is hidden.</p>
  
  <p>The React Table data is like this</p>
  
  <pre><code>const columns = [
   {
      Header: 'Column 1',
      accessor: 'firstName',
      // show: true // shows the particular column (true is default)
     //  show: false // hides the particular column
    },
    {
      Header: 'Column 2',
      accessor: 'firstName',
    },
    {
      Header: 'Column 3',
      accessor: 'firstName',
    },
    {
      Header: 'Column 4',
      accessor: 'firstName',
    },
    {
      Header: 'Column 5',
      accessor: 'firstName',
    },
    {
      Header: 'Column 6',
      accessor: 'firstName',
    },
    {
      Header: 'Column 7',
      accessor: 'firstName'
    },
    {
      Header: 'Column 8',
      accessor: 'firstName',
    }
  ];
  </code></pre>
  
  <p>Now have a look at this image. The image shows my dashboard page along with the checkbox popup page which can turn my column on/off (or show/hide)</p>
  
  <p><a href="https://i.stack.imgur.com/nJtvN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nJtvN.png" alt="Image of dashboard and checkbox page"></a></p>
  
  <p>This is the code for the popup page for checkbox</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { bindActionCreators } from 'redux';
  import { connect } from 'react-redux';
  import { ActionCreators } from '../../../actions';
  import ButtonComponent from '../../common/button/ButtonComponent';
  import { CheckBox } from '../../common/chkbox/CheckBox';
  
  class CustomizedView extends Component {
    constructor(props) {
      super(props);
      this.handleCheckChildElement = this.handleCheckChildElement.bind(this);
      this.state = {
        items: [
          { id: 1, value: 'Column 1', isChecked: true },
          { id: 2, value: 'Column 2', isChecked: true },
          { id: 3, value: 'Column 3', isChecked: true },
          { id: 4, value: 'Column 4', isChecked: true },
          { id: 5, value: 'Column 5', isChecked: true },
          { id: 6, value: 'Column 6', isChecked: true },
          { id: 7, value: 'Column 7', isChecked: true },
          { id: 8, value: 'Column 8', isChecked: true },
        ]
      };
    }
  
    handleClick() {
      this.setState({ isChecked: !this.state.isChecked });
    }
  
    handleCheckChildElement(event) {
      const { items } = this.state; //extract state values like this to a const variable
      const newItems = items.map((item) =&gt; { //do map on items because map returns a new array. It’s good practice to use .map than forEach in your case
        if(item.value === event.target.value) {
          item.isChecked = event.target.checked;
          return item; //return updated item object so that it will be pushed to the newItems array
        }
        return item; // return item because you need this item object as well
      });
      this.setState({ items: newItems }); //finally set newItems array into items
      const column1checked = items[0].isChecked;
      console.log('column1checked ' + column1checked);
      const column2checked = items[1].isChecked;
      console.log('column2checked ' + column2checked);
      const column3checked = items[2].isChecked;
      console.log('column3checked ' + column3checked);
      const column4checked = items[3].isChecked;
      console.log('column4checked ' + column4checked);
      const column5checked = items[4].isChecked;
      console.log('column5checked ' + column5checked);
      const column6checked = items[5].isChecked;
      console.log('column6checked ' + column6checked);
      const column7checked = items[6].isChecked;
      console.log('column7checked ' + column7checked);
      const column8checked = items[7].isChecked;
      console.log('column8checked ' + column8checked);
    }
  
    render() {
      return (
        &lt;div className='div-container-custom' &gt;
          &lt;div className='bottomBar'&gt;
            &lt;ButtonComponent
              text='Apply'
              className='activeButton filterMargin-custom'
              width='100'
              display='inline-block'
              onClick={() =&gt; { this.props.applyFilter(this.state, false); }}
            /&gt;
            &lt;ButtonComponent
              text='Clear Filter'
              className='greyedButton clear-custom-filter'
              width='100'
              display='block'
              marginTop='60'
              onClick={() =&gt; { this.props.applyFilter(this.state, true); }}
            /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;div className='data-points-text'&gt;
              &lt;span&gt; Columns &lt;/span&gt;
            &lt;/div&gt;
            &lt;div className="App"&gt;
              &lt;ul&gt;
                {
                  this.state.items.map((item, i) =&gt; {
                    return (&lt;div key={i} &gt;&lt;CheckBox handleCheckChildElement={this.handleCheckChildElement} {...item} /&gt;&lt;/div&gt;);
                  })
                };
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  CustomizedView.propTypes = {
    applyFilter: PropTypes.func.isRequired
  };
  
  CustomizedView.defaultProps = {
  };
  
  function mapStateToProps(state) {
    return {
      auth: state.auth
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return bindActionCreators(ActionCreators, dispatch);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(CustomizedView);
  </code></pre>
  
  <p>Now my point is when I only uncheck 4th column in the checkbox popup page I get the desired values (the above code)</p>
  
  <pre><code>column1checked true
  column2checked true
  column3checked true
  column4checked false
  column5checked true
  column6checked true
  column7checked true
  column8checked true
  </code></pre>
  
  <p>And ultimately this is my checkbox page</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  
  export const CheckBox = (props) =&gt; {
    // super(props);
    return (
      &lt;li&gt;
        &lt;input key={props.id} onClick={props.handleCheckChildElement} type="checkbox" checked={props.isChecked} value={props.value} /&gt; {props.value}
      &lt;/li&gt;
    );
  };
  
  CheckBox.propTypes = {
    id: PropTypes.string,
    handleCheckChildElement: PropTypes.func,
    isChecked: PropTypes.bool,
    value: PropTypes.string,
  };
  
  export default CheckBox;
  </code></pre>
  
  <p>Now my question is I have the constants in CustomizedView Component. I need those const variables available in ReactTable Component (path is like this - '../../common/chkbox/CheckBox')</p>
  
  <p>In the main dashboard page I import the React Table</p>
  
  <pre><code>import ReactTableComponent from '../common/react_table/ReactTableComponent';
  </code></pre>
  
  <p>and just use it in the render function of the main dashboard page in this way.</p>
  
  <pre><code>&lt;ReactTableComponent /&gt;
  </code></pre>
  
  <p>So I need to use all those const variables of Customized variables in ReactTable Component to show/hide tables.</p>
  
  <p>Also here I have to use show: some_const  (I cannot use true or false)</p>
  
  <p><strong>I am a complete beginner in React and I need help from this community. Kindly help to implement this idea.</strong></p>
  
  <p><strong>All I want to know the best/easiest (may be great way or dumb way) way to transfer those 8 const variables from components\abcdashboard\customized_view\Customizedview to components\common\react_table\ReactTableComponent</strong></p>