Data fetched from server is not getting diplayed i

import React, { Component } from 'react';
    import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
    import classnames from 'classnames';
    let _ = require('lodash');

    import {Doughnut} from 'react-chartjs-2';

    import {bindActionCreators} from "redux";
    import {connect} from 'react-redux';

    import {fetchedBeacons} from '../../actions/';

    // const beacon = {
    //     _id: 'jslg',
    //     name: 'beacon 1',
    //     description: 'something goes here',
    //     status: 'ACTIVE',
    //     manufacturer: 'EDDY',
    //     floor: '1st floor',
    //     location: 'entrance'
    // };

    // const advanceBeacon = {
    //   uuid: '452-457-854-521-125',
    //     major: '7458-458-56',
    //     minor: '7458-665',
    //     beaconType: 'bluetooth'
    // };

    const ChartData = {
      labels: ['wednesday', 'yesterday', 'today'],
      datasets: [
        {
          label: 'My First dataset',
          borderColor: 'rgba(255,255,255,.55)',
          data: [ 856, 785, 785],
          backgroundColor: [
    		'#063e70',
    		'#107bb5',
    		'#666666'
    		]
        }
      ],
    };

    // TODO - come up with a decent name

    class InfoRow extends Component {
        render() {
            return (
                
                <tr>
                    <td>{this.props.beacon}</td>
                    <td>{this.props.beacon}</td>
                </tr>
            )
        }
    }

    class InfoRows extends Component {
      render() {
        return (
           <tr>
                    <td>{this.props.beacon.major}:</td>
                    <td>{this.props.beacon.minor}</td>
                    <td>{this.props.beacon._id}</td>
                </tr>
        )
        
      }
    }
        
    class BeaconChartAnalysis extends Component {
        render() {
            return (
                <div className="col-lg-6">
                    <Doughnut data={ChartData}/>
                    <br/>

                </div>
            )
        }
    }

    class BeaconDetails extends Component {


        constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
          activeTab: '1'
        };
      }

      toggle(tab) {
        if (this.state.activeTab !== tab) {
          this.setState({
            activeTab: tab
          });
        }
      }

        render() {

            const rows = [];
            let a = this.props.bcn;
            
            Object.keys(a).map(function(keyName, keyIndex){
              let b = a[keyName];
              console.log(b);
              return rows.push(<InfoRow beacon={keyName} key={keyIndex}/>)
            })

            const row = [];

            // this.props.bcn.map( item => {
            //     return row.push(<InfoRows beacon={item}/>)
            // });

            return (


                <div className="col-md-6 mb-2">
                <Nav tabs>
                  <NavItem>
                    <NavLink
                      className={classnames({ active: this.state.activeTab === '1' })}
                      onClick={() => { this.toggle('1'); }}
                    >
                      Beacon Details
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className={classnames({ active: this.state.activeTab === '2' })}
                      onClick={() => { this.toggle('2'); }}
                    >
                      Advanced Details
                    </NavLink>
                  </NavItem>
                </Nav>
                <TabContent activeTab={this.state.activeTab}>
                  <TabPane tabId="1">

                    <div className="col-lg-6">

                      <table className="table table-clear">
                        <tbody>
                          {rows}
                        </tbody>
                      </table>
                     </div>
    .
                  </TabPane>
                  
                  <TabPane tabId="2">

                    <div className="col-lg-6">
                      <table className="table table-clear">
                        <tbody>
                          {row}
                        </tbody>
                      </table>
                     </div>

                  </TabPane>

                </TabContent>
              </div>

            )

        }


    }

    class BeaconDetailComponent extends Component {

      componentWillMount = () => {
            this.props.fetchedBeacons(this.props.location.query.id);
        };

      
      render() {
        
        return (
            <div className="container">
                <div className="row">
                  <div className="col-md-6 col-md-offset-3"><h1>Beacon Information {this.props.location.query.id}</h1></div>
                </div>
                <br/>
                <br/>
                    { this.props.bcn != null?
                <div className="row">
                    <BeaconDetails bcn={this.props.bcn}/>
                    <BeaconChartAnalysis />
                </div> :
                        <center><h1>...Loading</h1></center>

                }
            </div>
        )
      }
    }

    function mapStateToProps(state) {
        return {
            bcn: state.beacons
        }

    }


    function matchDispatchToProps(dispatch){
        return bindActionCreators({fetchedBeacons: fetchedBeacons}, dispatch);
    }

    export default connect(mapStateToProps, matchDispatchToProps)(BeaconDetailComponent);

i had provided the code snippet what i wanted is to show the details fetched from the server i also provided the screenshot that in console data is getting displayed but on the screen it is not Image you can see the object being fetched from the server and its details being displayed in the console but it is not showing on the screen

In your beaconDetails compoenent you need to pass the value to the InfoRow compoent along with the key and also perform a check for null. Also you don't need a return statement in the map function since you are pushing object to the row array

 const rows = [];
        let a = this.props.bcn;
        // console.log(a);
        if(a != undefined) {
            Object.keys(a).map(function(value, keyIndex){
                 console.log(a[value]);
                 rows.push(<InfoRow beaconKey={value} beaconValue={a[value]} key={keyIndex}/>)
             })
        }

and in your InfoRow compoent you can display this value

class InfoRow extends Component {
    render() {
        return (
            <tr>
                <td>{this.props.beacon}</td>
                <td>{this.props.beaconValue}</td>
            </tr>
        )
    }
}

You can also change the beaconsDetail component to be like

class BeaconDetails extends Component {


        constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
          activeTab: '1'
        };
      }

      toggle(tab) {
        if (this.state.activeTab !== tab) {
          this.setState({
            activeTab: tab
          });
        }
      }

        render() {



            const row = [];

            // this.props.bcn.map( item => {
            //     return row.push(<InfoRows beacon={item}/>)
            // });

            return (


                <div className="col-md-6 mb-2">
                <Nav tabs>
                  <NavItem>
                    <NavLink
                      className={classnames({ active: this.state.activeTab === '1' })}
                      onClick={() => { this.toggle('1'); }}
                    >
                      Beacon Details
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className={classnames({ active: this.state.activeTab === '2' })}
                      onClick={() => { this.toggle('2'); }}
                    >
                      Advanced Details
                    </NavLink>
                  </NavItem>
                </Nav>
                <TabContent activeTab={this.state.activeTab}>
                  <TabPane tabId="1">

                    <div className="col-lg-6">

                      <table className="table table-clear">
                        <tbody>
                          {this.props.bcn && 
                            Object.keys(this.props.bcn).map(function(keyName, keyIndex){

                                return <InfoRow beacon={keyName} beaconValue={a[keyName]}key={keyIndex}/>
                             })}
                        </tbody>
                      </table>
                     </div>
    .
                  </TabPane>

                  <TabPane tabId="2">

                    <div className="col-lg-6">
                      <table className="table table-clear">
                        <tbody>
                          {row}
                        </tbody>
                      </table>
                     </div>

                  </TabPane>

                </TabContent>
              </div>

            )

        }


    }