Cfrgtkky

I'm using React and Redux to build a website and I have the code below for AppInfo component. I have result variable in the render method which is initialized before return statement. At first the result is an empty string but once the state changes it is set to an object which contains various app attributes. I want to display the result variable inside a div. The result always stays an empty string although I do see that the redux state is updated. In addition if call directly this.props.appId inside the div the updated state is indeed displayed. Why the result variable doesn't work?

This is my code:

import React, { Component } from 'react';

import PropTypes from 'prop-types';

import classnames from 'classnames';

import { connect } from 'react-redux';



class AppInfo extends Component {



  render() {

    const { appInfo } = this.props;

    const { appId } = appInfo;

    let result = '';



    if (appId) {

      result = JSON.stringify(appInfo);

    }



    return (

      <div>

        {result}

        {`JSON.stringify(appInfo) = ${JSON.stringify(appInfo)}`}

        {`this.props = ${JSON.stringify(this.props.appInfo)}`}

      </div>

    );

  }

}



AppInfo.propTypes = {

  appInfo: PropTypes.object.isRequired

};



const mapStateToProps = state => ({

  appInfo: state.app

});



export default connect(mapStateToProps, null)(AppInfo);

Could you try to use result = JSON.stringify(this.props.appInfo);?

I think the issue might be related to the first 2 const’s you create.