Is there a way to conditionally render a component without affecting the layout of other components? I'm trying to avoid unwanted shifts caused by this div
https://i.sstatic.net/g1eUd.gif
Do you have any suggestions? Here is a snippet of my code:
const [displayFeedbackMessage, setDisplayFeedbackMessage ] = useState();
useEffect(() => {
setDisplayFeedbackMessage(
<div>
{
displaySelectionResult &&
selected > 0 &&
<div>
{Pluralize("document", selected, true)}
{" "}selected out of{" "}
{Pluralize("document", available, true)}
{" "}available.
</div>
}
{
displayActionResult &&
<div>
{Pluralize("document", actioned, true)}
{" "} downloaded out of{" "}
{Pluralize("document", requested, true)}
{" "}requested.
</div>
}
</div>
)
},[selected, available, actioned, requested])
return (
<div>{displayFeedbackMessage}</div>
);