Q:

Disable button on selecting specific dropdown value in React js

I have to disable button when i select a particular value in dropdown. But, it is not working on changing the dropdown value. Initially , the button is disable when the select button value is "Select the report" and on changing select value , the button is enabled. However, when i again change the select value to "select the report", the button is in enable state and not in disable state.
class App extends Component {

state = {
    reports: [],
    selectedReport: '',
    isLoading:true,
    reportSelected:false
  }

  componentDidMount() {
  
    let url ="API";
    var requestOptions = {
      method: 'GET',
      redirect: 'follow'
    };
    trackPromise(
    fetch(url, requestOptions)
    .then(response => response.json())
    .then(data => {
      let reportsFromAPI = data.map( report => {
        return {value: report, display: report}
      })
      this.setState({
        reports:[{value:'', display: 'Select the report'}].concat(reportsFromAPI),
        isLoading: false,
        reportSelected:false
      })
 
  
    )}
render() {
    return (
     
        
      //{ !this.state.isLoading && 
      <div>
        <Header></Header>
        <LoadingIndicator/>
        <br />
        <div class="container">
        { !this.state.isLoading && 
          <div class="row">
            <div className="col-sm-8">
              <div>
               <select value={this.state.selectedReport} onChange={(e) =>  this.setState({ selectedReport: e.target.value},
                  ()=> {
                   if(this.state.selectedReport!=="Select the report")
                     {
                                 this.setState({ reportSelected: true})
                     }
                     else{
                                 this.setState({ reportSelected:false})
                     }
                   }
                   ) }>
                  {this.state.reports.map((report) => <option key={report.value} value={report.value}>{report.display}</option>)}
                </select>
              </div>

            </div>
            <div className="col-sm-4">
              <button type="button" disabled={!this.state.reportSelected} class="btn btn-primary" onClick={this.downloadReport}> Run Report</button>
            </div>
  

          </div>
         }
        </div>
      </div>
     // }

    );
  }
}

A:

selectedReport state value is never be Select the report for all options you have. And for option as you predefined is empty, you need set it to Select the report
reports:[{
  value:'Select the report', 
  display: 'Select the report'}]
.concat(reportsFromAPI),
...

