Placing hidden attribute with react in tag
Source: 
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
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>;
}
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
kimy82
