Render conditionally a component without losing "empty" space - ReactJS

Question

I am wondering how can i render a component conditionally without losing its space . Basically i want to remove the shift of the other components because of this div

Any suggestions ? Here is part 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>

    );

Anh Tuan · Accepted Answer · 2020-06-24T09:54:38.143

2

just add visibility style to your div contain message, then set it visible : hidden to show or hide it

style={{ height: '50px', visibility : condition ? 'visible' : 'hidden' }}

edited Jun 24 '20 at 09:54

answered Jun 24 '20 at 09:35

Anh Tuan

1,113
5
12

the style should be setted to the `div` into the `return` or ... ? – PandaMastr Jun 24 '20 at 09:38
in your case i think you should put default value in const [displayFeedbackMessage, setDisplayFeedbackMessage ] = useState(null); – Anh Tuan Jun 24 '20 at 09:40
then
{displayFeedbackMessage}
– Anh Tuan Jun 24 '20 at 09:40
btw how you can bold your comment sir :D – Anh Tuan Jun 24 '20 at 09:41
1

" ` " with this symbol you have to wrap your word that you want to highlight . But further to the discussion . This method that you have suggested does not work . I mean it does but the shift still persist – PandaMastr Jun 24 '20 at 09:43
how about set a fixed height for that div contain message , to make sure if Message have value or not, it still have that height ? @PandaMastr – Anh Tuan Jun 24 '20 at 09:47
1

`
{displayFeedbackMessage}
` update your answer with this and i will mark it as correct . Thanks man – PandaMastr Jun 24 '20 at 09:52

score 2 · Answer 2 · answered Jun 24 '20 at 09:42

2

You could use the styles visibility (hidden or visible) or opacity (0 or 1). They are a bit different as you can read here.

answered Jun 24 '20 at 09:42

Wannes

1,019
2
11
18

Render conditionally a component without losing "empty" space - ReactJS

2 Answers2