Change the colours of a button on the basis of the selected values in React

ganesh Source

I am new to the react js. I have a form which is a normal form , using simple bootstrap 3 forms. Here, I have two select

<form className="form-inline text-center row" role="form">
  <div className="col-xs-4">
    <div className="form-group col-xs-12">
      <label className="control-label">company/project</label>
      <select id="company" className="form-control" onChange={(event, newValue) => this.setState({ company: event.target.value, hasUserFilledCompany: true })}>
        <option disabled selected value>None Selected</option>
        <option>abc</option>
        <option>pqr</option>
        <option>xyz</option>
        <option>cdcdc</option>
        <option>abcd</option>
      </select>
    </div>
  </div>
  <div className="col-xs-4">
    <div className="form-group  col-xs-12">
      <label>Select Technology</label>
      <select id="Technology" className="form-control" onChange={(event, newValue) => this.setState({ Technology: event.target.value, hasUserFilledTech: true })}>
        <option disabled selected value>None Selected</option>
        <option>qwe</option>
        <option>gahs</option>
        <option>cdbcdbhcd</option>
        <option>cdcdc</option>
        <option>cdcbdc</option>
      </select>
    </div>
  </div>
  <div className="col-xs-4">
    <div className="form-group col-xs-12" style={jobUpload}>
      <div className="row">
        <label>Job Description</label>
        <button type="button" className={"btn " + ((this.state.hasUserFilledTech && this.state.hasUserFilledCompany) ? 'enable-Button' : 'jd-button')} onClick={(event) => this.createJob(event)}>Add/Paste</button>
        <span style={or}>Or</span>
        <button type="button" className="btn jd-button">Upload File</button>
      </div>
    </div>
  </div>
</form>

Now, Here, what I want to do is that is user selects value from the select then buttons colour will get changed and also it will enabled. for this, my solution is I have use two variables on select as a state variable and if this becomes true then I am applying condition classes to this buttons.

This is working, But I don't think this is a proper solution to validate a form . How can I do this?

javascripthtml5reactjstwitter-bootstrapreact-redux

Answers

answered 1 month ago Kyaw Siesein #1

This is how you can do this. A few good practise would be how you implement onChange function in select. You repeat a bit there. Notice how I destructured the event in onChange function. And You don't need another variable you can just check !!company && company.length > 0.

Here is the demo https://codesandbox.io/s/30yj7mrq4q

class App extends React.Component {
  state = {
    company: "",
    tech: ""
  }

  onChange = ({ target: { name, value } }) => {
    this.setState({ [name]: value });
  }

  render() {
    const { tech, company } = this.state;
    const enabled = (!!tech && tech.length > 0) && (!!company && company.length > 0)

    return (
      <div>
        <div>
          <label> Company </label>
          <select name="company" onChange={this.onChange}>
            <option disabled selected value>None Selected</option>
            <option> Google </option>
            <option> Facebook </option>
            <option> Microsoft </option>
          </select>
        </div>
        <div>
          <label> Tech </label>
          <select name="tech" onChange={this.onChange}>
            <option disabled selected value>None Selected</option>
            <option> React </option>
            <option> Angular </option>
            <option> Vue </option>
          </select>
        </div>
        <div>
          <button className={`btn ${enabled ? "enabled" : "disabled"} `} disabled={!enabled}>Upload File</button>
        </div>
      </div>
    )
  }

}

comments powered by Disqus