CODEWITHSUNDEEP
reactjsjsx
JAmes
JAmes

Reputation: 281

Possible to self refence element inside style={}? - ReactJS

is it possible to reference the button itself when declaring the style? style={this.current.disabled == true ? {...

                            <button
                                ref={createRef}
                                type='submit'
                                disabled={name === '' || category === '' || institute === '' || description === ''}
                                style={this.current.disabled == true ? { color: "red" } : { color: "yellow" }}
                                onClick={() => createChat()}
                            >Create</button>

Thank you

Upvotes: 0

Views: 289

Answers (2)

Uri Kutner
Uri Kutner

Reputation: 161

this would work, ie:

const disabled = name === '' || category === '' || institute === '' || description === '';

const buttonStyles = { color: "yellow" };
const disabledStyles = { color: "red" }; 

return <button
  disabled={disabled}
  style={{ ...buttonStyles, ...(disabled && disabledStyles) }}
>
  Create
<button>

however, you cannot access this or the underlying element - React function components do not have this, and its value will be undefined.

You could use the ref.current?.disabled, but it would be undefined on the first run, and is not recommended.

It would be best performance-wise to use regular css or some full css-in-js solution, because you will be able to access the :disabled { } pseudo selector, like so:

.my-button {
  color: 'yellow';
}

.my-button:disabled {
  color: 'red';
}

Upvotes: 1

Pruthvish
Pruthvish

Reputation: 56

Yes this is possible but you have to use like this

 <button 
   ref={createRef} 
   type='submit'
   disabled={name === '' || category === '' || institute === '' || 
    description === ''}
   style={{ color: this.current.disabled == true ? "red" : "yellow" }}
   onClick={() => createChat()}
 >Create</button>

Upvotes: 0

Related Questions