Matthew C.
—You have an attribute or property that you would like to conditionally add to your component or element. How do you do this?
Let’s say that we have a submit button that we would like to disable if a particular checkbox, such as a checkbox asking the user if they’ve read the terms of service, has not been checked.
There are different ways to conditionally add attributes to components. The method you choose to use depends on personal or team preferences and how many attributes you want to conditionally render. The methods used, apart from the spread operator, can also be used for conditionally rendering components.
A React component tree is made up of host and non-host components. Host components are platform-specific. In a browser, a React element that renders an <input>
DOM element is a host component. If a React host component attribute is set to null
, undefined
, or false
, React will not pass the attribute to the DOM element. This is not true for non-host React components, such as a custom component that you define. In the example code below, if the checked
state is false
, the button will be disabled:
<label> <input type="checkbox" checked={checked} onChange={handleChange} /> I have read the terms of service </label> <button type="submit" disabled={!checked}> Submit </button>
You can use a Boolean value to conditionally add an attribute to an element:
<button type="submit" disabled={!checked}> Submit </button>
You can also cast values to a Boolean using the Boolean()
function or the double NOT (!!) operator.
You can use the logical AND (&&) operator to conditionally add an attribute to an element based on the output of a logical AND expression:
<button type="submit" disabled={state.type === 'guest' && !checked}> Submit </button>
You can use a ternary operator to conditionally add an attribute to an element based on the output of a ternary expression:
<button type="submit" disabled={!checked} className={checked ? 'btn-enabled' : 'btn-disabled'}> Submit </button>
This is similar to using the logical AND (&&) operator. It takes a little longer to type but some programmers may find it more readable.
You can use an if statement to alter attributes if certain conditions are met, such as in the example code below:
let disabled = false; if (state.type === "guest" && !checked) { disabled = true; } return ( ... <button type="submit" disabled={disabled}> Submit </button> );
You can use spread syntax to add multiple attributes at once. This is useful if you have many attributes that you want to add to an element or component. In the example code below, the <input>
attributes are in an object. These are then conditionally changed using an if statement before spreading in the attributes to an element during rendering.
const attributes = { type: "checkbox", name: "terms", id: "terms" }; if (state.type === "guest") { attributes.required = false; attributes.disabled = true; } return ( ... <input {...attributes} /> );
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODESConsidered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.
Here’s a quick look at how Sentry handles your personal information (PII).
×We collect PII about people browsing our website, users of the Sentry service, prospective customers, and people who otherwise interact with us.
What if my PII is included in data sent to Sentry by a Sentry customer (e.g., someone using Sentry to monitor their app)? In this case you have to contact the Sentry customer (e.g., the maker of the app). We do not control the data that is sent to us through the Sentry service for the purposes of application monitoring.
Am I included?We may disclose your PII to the following type of recipients:
You may have the following rights related to your PII:
If you have any questions or concerns about your privacy at Sentry, please email us at compliance@sentry.io.
If you are a California resident, see our Supplemental notice.