Placing hidden attribute with react in tag

user_5639673 0
Viewed 11836

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>

reactjs javascript
3 Answers

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>
user_98239390
Related