Getting error while closing the react-modal

Question

here when a user click on a picture of the UserProfile component, a modal opens with details about the picture. But when a user closes the modal, an error is generated. Error: Cannot read property 'uid' of undefined at t.value (PostListItem.js:68) I think t is trying to rendering postlistItem after modal close which should not happen as the content is set to '' while closing the modal.

//UserProfile

class UserProfile extends React.Component{
constructor(props){
    super(props);
     this.state = {
        isFollowed: false,
        content: undefined
    } 
}

 componentDidMount(){  
 this.props.dispatch(usersFetchData(`http://localhost:5000/api/user/
 ${this.props.match.params.uid}`));
    (Object.keys(this.props.user).length !== 0) &&
        (this.props.user.followers.includes(this.props.currentUser.uid)) &&
            this.setState({isFollowed: true});
  }

 componentWillUnmount(){
     this.props.dispatch(resetUser());
 } 

 onFollow = () =>{
    if(this.state.isFollowed){
        this.props.dispatch(removeFollower(this.props.user.uid, 
 this.props.currentUser.uid));
        this.props.dispatch(removeFollowing(this.props.currentUser.uid, 
this.props.user.uid));
        this.setState({isFollowed: false}); 
    }else{
        this.props.dispatch(addFollower(this.props.user.uid, this.props.currentUser.uid));
        this.props.dispatch(addFollowing(this.props.currentUser.uid,this.props.user.uid));
        this.setState({isFollowed: true});    
    }  
} 

openModal = (post) => {
    this.setState({content:post});
    console.log(this.state);
}

closeModal = () =>{
    this.setState(() => ({ content: '' }));
    console.log(this.state);
}

render(){
        if (this.props.hasErrored) {
            return <p>Sorry! There was an error loading the items</p>;
        }
        if (this.props.isLoading) {
            return <p>Loading…</p>;
        }
        return(
            <div className="userProfile">
                <div>
                    {console.log(this.props.user)}
                    { Object.keys(this.props.user).length !== 0 && 
                        <div className="user__details">
                            <div className="user__dp">
                                <div className="dp__container">
                                   <img src={this.props.user.avatar} alt= 
{this.props.user.name}/>
                                </div>
                            </div>
                            <div className="user__description">
                                <p className="user__name"> 
{this.props.user.name}</p>


                                <div className="user__button">
                                    {(this.props.currentUser.uid === 
this.props.user.uid) ?
                                        <button className="ef__button"><Link 
to={`/${this.props.user.uid}/edit`}>Edit Profile</Link></button> :
                                        <button 
                                        className="ef__button"
                                        onClick={this.onFollow}>
                                        {this.state.isFollowed? 'Following': 'Follow'}
                                    </button>
                                }
                                </div>
                            </div>
                        </div>
                   }

                </div>
                <div className="user__bio">
                   <p>{this.props.user.bio}</p>
                </div>
                <div>
                    <h3>Posts</h3>
                    <div className="userContent">
                    {this.props.user.posts && 
this.props.user.posts.map((post) =>{
                        return(
                            <div className="userPost">
                                <img src={post.content} onClick={() => 
this.openModal(post)}/>
                            </div>

                        );
                    })
                    }
                    <ContentModal
                        content={this.state.content}
                        closeModal={this.closeModal}
                    />
                    </div>
                </div>
            </div>
        );
        }       
}


const mapStateToProps = (state) =>{
console.log(state);
 return{ 
     currentUser: state.auth,
     user: state.users,
     hasErrored: state.usersHasErrored,
     isLoading: state.usersIsLoading
 }
};

export default connect(mapStateToProps)(UserProfile);

//contentModal

const ContentModal = (props) => (
<Modal
    isOpen={!!props.content}
    onRequestClose={props.closeModal}
    shouldCloseOnOverlayClick={true}
    shouldCloseOnEsc={true}
    contentLabel="content"
    closeTimeoutMS={200}
    className="content__modal"
>
<div className="post__container">
    {<PostListItem {...props.content}/>}
</div>    
{console.log(props)}
</Modal>

Answer 1

You get the issue because intially the content is undefined and when you are closing the model the content is set to empty string so uid won't be available so call PostListItem only when content is not undefined and not empty.

Add the below condition in ContentModal component

{typeof props.content != "undefined" && props.content != "" && <PostListItem {...props.content}/>}