Getting error while closing the react-modal - reactjs

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}/>}