CODEWITHSUNDEEP
javascriptreactjs
Straider
Straider

Reputation: 15

How to change style at a certain value? React

If {product} will contain value "empty", then how change the field style, for example, so that it turns red?

const Active_task_prop = ({ value, label, prop_name, change_task_prop, title = "" }) => (
  <div className="w3-rest">
    <input
      className={"w3-input w3-border w3-round "}
      type="text"
      title={title}
      value={value}
    />
  </div>
);
// ...
<div className="App">
  <Active_task_prop value={product} prop_name="product" label="Application" />
</div>;

Upvotes: 0

Views: 82

Answers (4)

Qubaish Bhatti
Qubaish Bhatti

Reputation: 728

Just add extra props to handle errors properly. 

import sn from 'classnames'
const Active_task_prop = ({ value, label, prop_name, change_task_prop, title = "", isError }) => (
  <div className="w3-rest">
    <input
      className={sn("w3-input", "w3-border", "w3-round", isError && "error-class")}
      type="text"
      title={title}
      value={value}
    />
  </div>
);
// ...
<div className="App">
  <Active_task_prop value={product} prop_name="product" label="Application" isError={isError} />
</div>;

Upvotes: 0

Muhammad Usman Ali
Muhammad Usman Ali

Reputation: 1

please see the below code. it will help you to custom your style accordingly your value.

const Active_task_prop = ({ value, label, prop_name, change_task_prop, title = '' }) => (
    <div className="w3-rest">
      <input
        className={'w3-input w3-border w3-round '}
        type="text"
        title={title}
        style={{color:value === 'something' ? 'red' : 'black' }}
        value={value}
      />
    </div>
  </div>
)
  return (
    <div className="App">
      <Active_task_prop
              value={product}
              prop_name="product"
              label="Application"
            />
    </div>
  );
}

Upvotes: 0

Rahul Jat
Rahul Jat

Reputation: 706

simple way where w3-rest-empty class change the field style

 const Active_task_prop = ({ value, label, prop_name, change_task_prop, title = "" }) => (
  <div className={value==''|| value==null ||value=="empty"? 'w3-rest-empty':'w3-rest'}>
    <input
      className={"w3-input w3-border w3-round "}
      type="text"
      title={title}
      value={value}
    />
  </div>
);
// ...
<div className="App">
  <Active_task_prop value={product} prop_name="product" label="Application" />
</div>;

Upvotes: 1

AKX
AKX

Reputation: 168997

In general with a ternary expression:

className={"w3-input w3-border w3-round " + (value === "empty" ? "my-red-class" : "")}

or if you'd like it as an inline style for some reason,

style={{color: (value === "empty" ? "red" : "")}}

.

When your className statements get more complex, though, I suggest looking into the classnames (or cx, as it usually is used) module:

className={cx({
  "w3-input": true,
  "w3-border": true,
  "w3-round": true,
  "my-red-class": value === "empty",
})}

Upvotes: 1

Related Questions