Delay JSX evaluation - reactjs

Question

I have a function which returns JSX to some React components. I realized that I need to also include some of the state variables of those components in the JSX. Each component might need to change the JSX or the values in it (or both). See the code below.
export function getDisplayBlock(a: number) {
if (a == 1) {
return <>{title}</>;
} else if (a == 2) {
return (
<>
{title}
{subtitle}
</>
);
} else if (a == 3) {
return (
<>
<img src={companyLogo} />
{caption}
</>
);
}
}
This doesn't work because in getDisplayBlock the title,subtitle,companyLogo and caption are not known.
Some workarounds I considered:
Pass all those (title,subtitle) as another argument to the function. this requires recalling the function everytime these variables are updated
Return a string instead of JSX and substitute the parameter values with regex, then use dangerouslySetInnerHTML.
"Hack it" (advantage here is that you call the function once to get the JSX that the component needs):
export function getDisplayBlock(this: any, a: number) {
if (a == 1) {
return () => <>{this.state.title}</>;
} else if (a == 2) {
return () => (
<>
{this.state.title}
{this.state.subtitle}
</>
);
} else {
return () => (
<>
<img src={this.state.companyLogo} />
{this.state.caption}
</>
);
}
}
Any ideas appreciated!

Answer 1

There is no way to refresh the return value of the function without recalling it. You can checkout if something like React.Context is what you're interested in though it won't really improve the amount of calls to the rendering code and thus performance (is that the concern ?).
I don't fully understand the use case, i.e. if the parent components will always ever only render one of the jsx return values, then spread them out into separate components instead of having them in the same function.
The end result will be the same, the function will need to be recalled every time the state updates. But the code will be much cleaner.
Update per refreshed question:
If you want to control the JSX passed in, maybe rendering children in the subcomponent will work for you like so:
const GetDisplayBlock = props => {
const { a } = props;
return (
<>
{a == 1 ? (
<>{props.children}</>
) : a == 2 ? (
<>
<diV>{props.children}</diV>
</>
) : (
<>
<p>{props.children}</p>
</>
)}
</>
);
};
...
Then in the rendering call, you may call it like so:
<GetDisplayBlock a={3}>
<div>buyaka</div>
</GetDisplayBlock>