I have a functional react ponent (hooks) called toggle, that has a button ponent, and when clicked, toggles the visibility of an <styledTitle> (styled-ponents). It looks like this:

const Toggle = () => {
    const styledTitle = styled.h1`
        //some styles
        //SUDO CODE: display none if toggle === true else block
    `;
    const [toggle, setToggle] = useState(false)
    const handleToggle = () => {
        setToggle(!toggle)
    }
    <button onClick={handleToggle}>Click me</button>
    <styledTitle>Text</styledTitle>
}

I want the styledTitle to display: none if the value of toggle is true else display: block

How can I do that? Thanks is advance.

I have a functional react ponent (hooks) called toggle, that has a button ponent, and when clicked, toggles the visibility of an <styledTitle> (styled-ponents). It looks like this:

const Toggle = () => {
    const styledTitle = styled.h1`
        //some styles
        //SUDO CODE: display none if toggle === true else block
    `;
    const [toggle, setToggle] = useState(false)
    const handleToggle = () => {
        setToggle(!toggle)
    }
    <button onClick={handleToggle}>Click me</button>
    <styledTitle>Text</styledTitle>
}

I want the styledTitle to display: none if the value of toggle is true else display: block

How can I do that? Thanks is advance.

• javascript
• reactjs
• styled-ponents

3 Answers 3

You can make use props to add conditional styles to your styled-ponent.

Also define your styled ponent outside of your fucntional ponent to ensure that a single instance is created

const StyledTitle = styled.h1`
    display: ${props => props.visibility? 'block': 'none'}
`;

const Toggle = () => {

    const [toggle, setToggle] = useState(false)
    const handleToggle = () => {
        setToggle(!toggle)
    }

    ...
    <button onClick={handleToggle}>Click me</button>
    <StyledTitle visibility={toggle}>Text</StyledTitle>
}

Pass params

You can pass the state you made to the ponent

const Toggle = () => {
    const styledTitle = styled.h1`
        //some styles
      display: ${({toggle}) => toggle ? 'none' : 'block'};
    `;
    const [toggle, setToggle] = useState(false)
    const handleToggle = () => {
        setToggle(!toggle)
    }
    <button onClick={handleToggle}>Click me</button>
    <styledTitle toggle={toggle}>Text</styledTitle>
}

Optimise

Like Shubham has in his answer you should rename your variables and make the styled ponent a separate thing.

// notice the name now in pascal case, ponents should always be in pascalcase
const StyledTitle = styled.h1`
  display: ${({isHidden}) => toggle ? 'none' : 'block'};
`;


const Toggle = () => {
    const [toggle, setToggle] = useState(false)
    const handleToggle = () => {
        setToggle(!toggle)
    }
    <button onClick={handleToggle}>Click me</button>

    // see the prop name here, isHidden, this is better than toggle as a prop
    <StyledTitle isHidden={toggle}>Text</StyledTitle>
}

you can use ternary operator on className <styledTitle className={toggle ? "hide" : "show"}>Text</styledTitle>

hide and show are css class with respectively display: none; and display: block