Source:  Twitter logo

I am trying to place "hidden" attribute with React. This is what i tried. It is supposed to sets/remove hidden attribute based on width:

function Welcome(props) {
  return <h1  hidden={(window.innerWidth < 1024) ? "hidden" : ''}>Hello</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
</div>

For future seekers.

<!-- This will show render as <div hidden>... -->
<div hidden={true}>Inner Content</div>

<!-- This will show render as <div>... -->
<div hidden={false}>Inner Content</div>
13 users liked answer #0dislike answer #013
FernandoG profile pic
FernandoG

If you need custom attribute - you have to use

data-attribute={(window.innerWidth < 1024) ? 'hidden' : ''}

If you need set hidden="hidden" - you have to use

hidden={(window.innerWidth < 1024) ? 'hidden' : ''}

In result you must have something like this:

function Welcome(props) {
  return <h1
      data-attribute={(window.innerWidth < 1024) ? 'hidden' : ''}
      hidden={(window.innerWidth < 1024) ? 'hidden' : ''}
    >Hello</h1>;
}
4 users liked answer #1dislike answer #14
cn007b profile pic
cn007b

You can do something like this:(to place custom attributes just add 'data-...')

function Welcome(props) {
 return window.innerWidth < 1024 ? <h1 data-attribute="hidden" >Hello</h1> : <h1>Hello</h1>
}

Hope that helps.

0 users liked answer #2dislike answer #20
kimy82 profile pic
kimy82

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).