How do I conditionally add an attribute to a Semantic UI React element?

0

Issue

I’m using Semantic UI React for a basic front end.

I’m using the Dimmer module which I want to conditionally apply the active attribute to, depending on whether the page is currently loading.

Whether the page is loading or not is indicated by a state variable. The below does seem to work, but it outputs a warning, which I’d like to remove.

<Dimmer active={this.state.isLoading} inverted>
  <Loader inverted></Loader>
</Dimmer>

The isLoading variable is a boolean:

  constructor() {
    super();
    this.state = {
      isLoading: true,
      ...

The console warning is as follows:

warning.js:33 Warning: Received `true` for a non-boolean attribute `active`.

If you want to write it to the DOM, pass a string instead: active="true" or active={value.toString()}.
    in div (created by DimmerDimmable)
    in DimmerDimmable (at explore.js:110)
    in div (created by Container)
    in Container (at explore.js:102)
    in div (at Layout.js:7)
    in Unknown (at explore.js:101)
    in ExploreBounty (created by App)
    in Container (created by App)
    in App
    in ErrorBoundary

Changing the boolean value of true to a string results in the following contradictory warning:

Warning: Failed prop type: Invalid prop `active` of type `string` supplied to `Dimmer`, expected `boolean`.
    in Dimmer (at explore.js:111)
    in ExploreBounty (created by App)
    in Container (created by App)
    in App
    in ErrorBoundary

Again, the page works with the boolean value, but I want to get rid of the warning. How do I do this?

Solution

According to your error here, the first error is not coming from your <Dimmer> component, it is coming from the <Dimmer.Dimmable> component.

On the <Dimmer> the active prop is indeed boolean, so you should continue to pass it there as a boolean from state.

On the <Dimmer.Dimmable> component, there is no active prop. That is why you are getting a warning. My guess is that you are passing active={this.state.isLoading} on both your Dimmer and Dimmer.Dimmable. If you use the dimmed component on the Dimmer.Dimmable I think that will solve your issue.

Answered By – brianespinosa

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More