Update Button Visibility Based on State Change in ReactJS

Question

Update Button Visibility Based on State Change in ReactJS

Currently, I'm utilizing a Material UI button within my React application. Despite changing the state, the button remains visible on the screen. Here's the relevant code snippet:

function MainPage() {
    const state = useSelector(state => state.loginDetails.state)

    const [visibilitySetting, setVisibility] = useState(true)

    useEffect(() => {
      console.log(state.loginType)
      if(state.loginType=="google")
      {
          setVisibility(false)
      }
    }, [])   
    

    return (
      <div style={{ height: 400, width: '100%' }}>
        <Button color="primary" variant="contained" style={{display:visibilitySetting}}   >
          Group
        </Button>
)

After verifying that state.loginType is indeed google,

I attempted setting display to none but observed no visible change in the button.

javascript css reactjs react-hooks material-ui

Answer 1

Answer №1

To ensure that useEffect runs every time the state changes, make sure to include the relevant state variable in the dependency array.

Here's an example:

 useEffect(() => {
      console.log(state.loginType)
      if(state.loginType==="google")
      {
          setVisibility(false)
      }
    }, [state.loginType])

For conditional rendering of the button component:

{visibilitySetting && <Button color="primary" variant="contained">
          Group
        </Button>}

Implementing this adjustment should effectively address the issue at hand.

Answer 2

To ensure that useEffect runs every time the state changes, make sure to include the relevant state variable in the dependency array.

Here's an example:

 useEffect(() => {
      console.log(state.loginType)
      if(state.loginType==="google")
      {
          setVisibility(false)
      }
    }, [state.loginType])

For conditional rendering of the button component:

{visibilitySetting && <Button color="primary" variant="contained">
          Group
        </Button>}

Implementing this adjustment should effectively address the issue at hand.

Answer 3

Answer №2

When setting the true and false values for the display property, it is important to also check the condition.

<Button ... style={{display: visibilitySetting ? 'block' : 'none'}}>

Answer 4

When setting the true and false values for the display property, it is important to also check the condition.

<Button ... style={{display: visibilitySetting ? 'block' : 'none'}}>

Update Button Visibility Based on State Change in ReactJS

Answer №1

Answer №2

Similar questions

Implementing a custom focus effect for MuiLink

creating a loop to handle AJAX requests for JSON data

Experiencing a WEB3js error in a Vite, React, TypeScript application: Troubleshooting TypeError with callbackify function absence

Exploration of the "display: none;" property and loading of content

Eliminate duplicate objects from arrays of objects by a specific key name

The alignment of the pagination in Mui datatables is currently not functioning

Ensure the footer remains fixed while scrolling

It is impossible for me to invoke a method within a function

What is the best way to ensure that the bootstrap nav tab content fits perfectly on one line?

Position a dynamic <div> in the center of the screen

issue with making simultaneous async requests in PERN stack application

Gulp- Ensuring the latest versions of your javascript files

Encountering the "Cannot set headers after they are sent to the client" error within an Express.js application

Unable to get React key={row._id} to function properly

Obtaining the correct information from an array using Ionic's Angular framework

Implementing setInterval() leads to the dynamic alteration of images

website pages loading faster than images can load

There was an issue with Angular 2.0 at :0:0, which was caused by a response with status: 0 from the URL: null

What is the best way to delete a property from an object in an array using Mongoose? This is crucial!

Having trouble transmitting JSON data to an Express server through the browser