CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
PandaMastr
PandaMastr

Reputation: 695

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

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 enter image description here

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>

    );

Upvotes: 3

Views: 1653

Answers (3)

Ravi Dubey
Ravi Dubey

Reputation: 11

Visibilty for hiding the View and display "none" for hiding it without taking any space. I remember this is correct?

Upvotes: 0

Anh Tuan
Anh Tuan

Reputation: 1143

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

Upvotes: 3

Wannes
Wannes

Reputation: 1069

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

Upvotes: 2

Related Questions