Component only rerenders if ternary expression is directly inside render() method - react-redux

Question

I'm building an app with React, Redux and TypeScript.
In the top navbar I have a "Log in" link which when clicked dispatches an action. For now, all this action does is set a boolean called auth to true.
I have a lot of connected components which listen to that auth property of the redux store and decide which sub-components to render, based on ternary expressions that evaluate this.props.auth.
I was surprised to see that when I clicked "Log in" some components would rerender as expected while others would have their state successfully changed but would only alter their display if I refreshed the page or routed away and came back. After some hours of hair-pulling I believe I finally isolated the difference between the two kinds of components described above: if the ternary expression that evaluates this.props.auth is directly inside the render() method, the component behaves as expected, however, if the ternary expression is inside a .map() function which is then called by the render() method, then this weird behavior happens where I have to refresh in order for the correct rendering to match the prop values. What's going on? Does this lose it's value, is this a sync/async problem?
class LatestArticles extends Component<LatestArticlesProps> {
public latestArticlesList: JSX.Element[] = Articles.map((a: IArticle) => {
return (
<React.Fragment key={a.id}>
// some TSX
{this.props.auth === true ? <UserImgOverlay /> : <UnlockButton />}
// some more TSX
</React.Fragment>
)
});
public render(): JSX.Element {
return (
<React.Fragment>
// some TSX
{this.latestArticles}
// some more TSX
</React.Fragment>
)
}
Do let me know if you need any more context but I would like to ask for help understanding what's going on. Why does the prop change only trigger a rerender if the ternary expression is directly inside the render() method and is there any way to go around this while still mapping the data? Thank you for your attention.
EDIT
Here's my mapStateToProps:
// Components/Navbar/index.tsx
const mapStateToProps = ({ articles, auth }: IApplicationState) => {
return {
articlesPerPage: articles.articlesPerPage,
articlesPerPageStep: articles.articlesPerPageStep,
auth: auth.auth
}
}
I actually have another example of this kind of behavior happening with an onClick method:
class LatestArticles extends Component<LatestArticlesProps> {
public latestArticlesList: JSX.Element[] = Articles.map((a: IArticle) => {
return (
<React.Fragment key={a.id}>
// some TSX
<StarsRating rating={3} onClick={this.handleRatingClick} />
// some more TSX
</React.Fragment>
)
});
constructor(props: LatestArticlesProps & IOwnProps) {
super(props)
this.handleRatingClick = this.handleRatingClick.bind(this);
}
public render(): JSX.Element {
return (
<React.Fragment>
// some TSX
{this.latestArticles}
// some more TSX
</React.Fragment>
)
}
public handleRatingClick = () => {
alert('Clicked!')
}
}
^ When I click on the star nothing happens, but if I extract <StarsRating rating={3} onClick={this.handleRatingClick} /> from the .map function and put it directly inside the render() method, I get the alert saying 'Clicked!'... I suspect this is losing its value but I'm not sure how to test that.

Answer 1

I think the problem is with the latestArticlesList variable. It is initialized too early. It should be a function:
public latestArticlesList: JSX.Element[] = () => Articles.map((a: IArticle) => {
I assume Articles should be this.props.articlesPerPage.
And finally when you use it, call it:
<React.Fragment>
// some TSX
{this.latestArticles()}
// some more TSX
</React.Fragment>