How to remove (only) the parent element when screen size < 875px in React?

user_11544206 0
Viewed 685

For a component I have made a LINK element around the element so it can function as a link. But this only needs to be on desktop. On mobile (max-width:875) the Link should be removed. How can I do this?

On mobile it should not work as a button.

The thing is, I can't use display:none the because this will remove the whole element.

I have commented which link has to be removed.

import React, { Component } from 'react';

import LogoMobileHero from '../assets/logo-diensen_project.svg';

class HeroMain extends Component {
  state = { showMenu: false };

  toggleMenu = () => {
    this.setState({
      showMenu: !this.state.showMenu,
    });
  };



  render() {
    const { showMenu } = this.state;
    const menuVis = !showMenu ? 'hideDiv' : '';
  

    return (
      <div onClick={this.toggleMenu}>
        {/* This line beneath should remove */}
        <a href="/projecten/" className="mobileNot"> 
        <div className='hero-element'>
          <article>
            <div className='hero-element-titel'>
              <LogoMobileHero
                className='desktop-hero-logo projecten-logo'
                fill='#73a400'
              />
              <LogoMobileHero
                className='mobile-hero-logo mobile'
                fill='#73a400'
              />
              <span className='mobile-hero-button'>
                <span>{'>'}</span>
              </span>
            </div>
            <div className='hero-element-text'>
              <p>
                Het gebruik van rope access is efficiënt en effectief. Door het
                gebruik van gespecialiseerde rope access technieken zijn wij in
                staat op moeilijke toegankelijke locaties werkzaamheden uit te
                voeren.
              </p>
            </div>
          </article>
          <div className='hero-element-image'>
            <a href='/projecten/' className='hero-element-image__link'>
              Projecten
            </a>
          </div>
        </div>

        {menuVis ? (
          <> </>
        ) : (
          <article className="home-hero-mobile mobile">
            <div className={`mobile container-info-mobile project`}>
              <p>
                Het gebruik van rope access is efficiënt en effectief. Door het
                gebruik van gespecialiseerde rope access technieken zijn wij in
                staat op moeilijke toegankelijke locaties werkzaamheden uit te
                voeren.
              </p>
              <a href='/projecten/'>projecten</a>
            </div>
          </article>
        )}
        {/* This line beneath should remove */}
        </a>
      </div>
    );
  }
}

export default HeroMain;
reactjs responsive css javascript
1 Answers

I know how to do this by using React with hooks but the idea should be useful for you,

 const [showLink, setShowLink] = useState(false);

  useEffect(() => {
    if (window.matchMedia("(max-width: 700px)").matches) {
      setShowLink(false);
      // alert("matches");
    } else {
      setShowLink(true);
    }
  }, []);

  return (
    <a
      href={showLink ? "https://www.google.com" : ""}
      style={
        showLink
          ? { textDecoration: "underline", color: "blue" }
          : { textDecoration: "none", color: "black" }
      }
    >
      <div className="App">
        <h1>Hello world</h1>
      </div>
    </a>
  );
}

I checking to see the screen size onMount so it will happen only once.

if (window.matchMedia("(max-width: 700px)").matches) {
      setShowLink(false);
      // alert("matches");
    } else {
      setShowLink(true);
    }

I have a state called showLink which is initialised with a value of true, i am checking to see if the width is more than 700px meaning that it is for tablets and above, I am changing the showLink to false.

 <a
      href={showLink ? "https://www.google.com" : ""}
      style={
        showLink
          ? { textDecoration: "underline", color: "blue" }
          : { textDecoration: "none", color: "black" }
      }
    >

I am doing some conditional rendering by checking the showLink value, if true then the href will be linking to google, if not then it will be empty so it wont link anywhere. Using the same tactic I am giving it conditional styles to make it look like a link or to make it look like a normal element based on the showLink value.

hope this helps :)

user_141456300
Related