Changing style of another element using react

user_17244879 0
Viewed 57

I'm relatively new to react and am totally lost trying to figure out how to make an Component appear when I press on a button. I've set up the code as such

<Button>GO</Button>

<CalendarIcon id="calendar visibility="hidden"/>

and then useVisibility()

export default function useVisibility() {
    const[visibility, setVisibility] = useState("hidden")

    useEffect(() => {
        function handleVis(){
            setVisibility("visible")
        }
        button.addEventListener("onClick", handleVis)

        return () => button.removeEventListener("onClick", handleVis)
    }, [])
    return visibility
}

My problem is that I don't know how to pass the button into the function so that I can add the event listener. If I am doing this in a totally roundabout way or overcomplicating it please tell me because I am so lost.

Thanks!

next.js reactjs javascript
3 Answers

What I would do is let each instance where you render a button specify how its click handler should behave as there can be many use cases for a button in a website.

function MyComponent() {
  const[isVisible, setIsVisible] = useState(false)
  const handleVisibilityToggle = useCallback(
    () => setIsVisible(!isVisible),
    [isVisible, setIsVisible]
  )
  ...
  const visibility = isVisible ? 'unset' : 'hidden'
  return (
    <>
      ...
      <Button onClick={handleVisibilityToggle}>GO</Button>
      <CalendarIcon id="calendar" visibility={visibility}/>
    </>

  )
}

if you would like to clean up how that code is used and abstract the logic to a visibility hook it would look something like this

function useVisibilityToggle(defaultValue = false) {
    const[isVisible, setIsVisible] = useState(defaultValue)
    const toggleVisibility = useCallback(
      () => setIsVisible(!isVisible),
      [isVisible, setIsVisible]
    )

    const visibility = isVisible ? 'visible' : 'hidden'
    return [visibility, toggleVisibility]
}

function MyComponent() {
  const [visibility, toggleVisibility] = useVisibilityToggle(false)
  
  return (
    <>
      ...
      <Button onClick={toggleVisibility}>GO</Button>
      <CalendarIcon id="calendar" visibility={visibility}/>
    </>

  )
}
user_27335060

Check the first example here: https://reactjs.org/docs/hooks-state.html

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

That should show you how to manipulate the state when the button is clicked. Next you wanted to show/hide something when that button is clicked.

First let's change that useState to a boolean one, so

const [hidden, setHidden] = useState(false);

Then we can change the button so that it uses the previous state to set the new one. You should never use the hidden in the setHidden, but instead pass a function into it, which gets the previous value as parameter.

<button onClick={() => setHidden(prevHidden => !prevHidden)}>

And now we want to use that value, so we can add something below the button:

{ !hidden ? (<p>This text is visible</p>) : (<></>) }

Working example: https://codesandbox.io/s/strange-williamson-wuhnb?file=/src/App.js

Your code looks like you are trying to build a custom hook, that's more advanced stuff, and if you are super new to React, you won't need that right now.

user_59340600

Your main goal is to show CalendarIcon component visible when you click on GO Button.

So you need a state lets say visible variable to control this. You can update this state onClick of your Button as shown below to true or false, And make visibility="visible" always.

When visible will be true your CalendarIcon will appear.

const [visible, toggleVisibility] = useState(false)

<Button onClick={()=> toggleVisibility(!visible)}>GO</Button>

{visible && <CalendarIcon id="calendar" visibility="visible"/>}
user_74354890
Related