score:2
you can perform that by replacing in ternary operator ''
by null
which will completely hide the class
attribute when it's set to null
class app extends react.component {
constructor(props) {
super(props);
this.state = {
istrue: false
}
this.togglestate = this.togglestate.bind(this);
}
togglestate () {
this.setstate({istrue: !this.state.istrue});
}
render() {
return (
<div classname="app">
<h1 classname={ this.state.istrue ? 'primary' : null }>{ this.state.istrue ? 'selva' : 'ganapathi'}</h1>
<button onclick={this.togglestate}>toggle</button>
</div>
);
}
}
reactdom.render(<app />, document.getelementbyid('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
score:0
import react from 'react';
import logo from './logo.svg';
import './app.css';
let j = {}
if(false) {
j.classname='primary'
}
function app() {
return (
<div classname="app">
<h1 {... j}>{ false ? 'selva' : 'ganapathi'}</h1>
</div>
);
}
export default app;
any one tell me how it works?
score:1
should be null
instead of empty string
<h1 classname={ istrue ? 'primary' : null}>...
score:1
in addition to other answers in the thread you can also do this concisely as this:
<h1 classname={ istrue && 'primary' }>{ false ? 'selva' : 'ganapathi'}</h1>
this works pretty much the same way:
if
istrue
istrue
then the second part of the expression is checked and the entire expression evaluates toprimary
.if
istrue
evaluates tofalse
, react setsclassname={false}
and it won't be set in your dom.
score:1
import react, { usestate } from 'react';
import logo from './logo.svg';
import './app.css';
function app() {
const [istrue, settrue] = usestate(false);
return (
<div classname="app">
<h1 classname={ istrue ? 'primary' : ''}>
{ istrue ? 'selva' : 'ganapathi'}
</h1>
</div>
);
}
export default app;
score:2
you could pass null
or undefined
to your classname to remove the prop.
under the hood, react
checks for those values and removes the prop for null
and undefined
.
<h1 classname={ istrue ? 'primary' : null}>{ false ? 'selva' : 'ganapathi'}</h1>
or
<h1 classname={ istrue ? 'primary' : undefined}>{ false ? 'selva' : 'ganapathi'}</h1>
Source: stackoverflow.com
Related Query
- React - show classname only if variable true
- React onClick method sets variable to true but only for a second when the page reloads - how to make changes permanent?
- How to add css propety only variable is. true ? React
- How to pass a state className variable to another component in react
- Show only the 1st line of text in React Native
- React show Material-UI Tooltip only for text that has ellipsis
- React show these div if true
- React Dev Tools does not show Component Names or State Variable Names
- Next.JS - Gist's embedded in markdown rendered via dangerouslySetInnerHTML only show after full page load, not React route load
- Conditionally setting className based on a state variable in a React functional component
- calendar Ant Design: how to show event only in specific day in month using React JS
- React - Show only the clicked user
- Show Sidebar Navigation only at Home using React Router Dom
- How to trigger useEffect in React only once AFTER some certain variable gets loaded
- How to show error only if Field is touched? | React && Formik
- React setState only returning last item in a list saved to variable
- React hooks: how to instantiate instance variable only once
- Only show matching string in array when using 'useMemo' in react
- Redirect to a page that only show the contents of a component/page using React Router
- React router only show Navigation component if the current path is on any of the valid routes
- Show only the existing elements in React
- How to render jsx only when a condition is true using react and typescript?
- how to show and hide popup only when promise is active ? React
- My React site only show home page, all other pages not found after upload on live server
- How to show only texts in react from json data with html tag?
- React State only updates when setting a useless state variable along with the necessary state variable
- react app doesn't read correct path for assets folder - local images don't show up on localhost, only shows an image icon
- Array only storing last variable when pushing from a JSON in React
- How to show only one active item at a time with react and material ui
- Only show Popup one time with React (local storage)
More Query from same tag
- How to handle image required field in case of update, react js
- Overwrite Material UI 5.0 typography theme globally with custom fonts
- Loading a user's profile image
- My React button is only working once, then no longer runs
- Why doesn't work button that increases the number (simulation of likes)? How to fix this problem?
- multiple iteration is done for creating the generic filters
- Is React's setState asynchronous or something?
- Jest - encountered an unexpected token when using transform property
- How can I reload the store after creating a resource at runtime?
- How to fetch data with multiple requests in Redux action creator and then send collected data to reducer?
- Routes not working in react-router v4
- failed to display state value in react
- How to create Accordion using Card Component
- Clickable ticker in React
- How to detach a part of some value inside a array object and map into new array from AWS MongoDB values?
- Cypress cant seem to find any elements inside the iframe
- Test a react component using test and react-testing-library
- How to change font color after select item from textview in Material-UI
- Refactoring using Async and await in React?
- Filter products based on searchString and product size
- How to rename project react native
- Unable to change input fields height MUI reactjs
- How can i fetch graphql api endpoint data in react with class components?
- React Calculator: How to prevent multiple decimals?
- react select removing the border and box shadow
- React after Delete I get "Unhandled Rejection (TypeError): this.state.products.filter is not a function"
- Flexbox cannot center text because of padding
- ReactJS communicate with Webview in Native Android ('Android' is not defined no-undef)
- ReactJS: How I do I use this this textInput component correctly?
- Change in state not being rendered with object.map