getting error in if else condition in react js

Question

I am new in react js, i want to apply if else condition in pagination, but when i apply that condition i am getting error, here i have added my condition { (this.state.value>0) ? }, here i have added my whole code, can anyone please help me how to apply that condition

class Permits extends React.Component {
  constructor(props){
    super(props);

    //this.onImportPermitClick = this.onImportPermitClick.bind(this);

    this.state = {
      options:{},
      results:[],
      total : 0,
    };
    autobind(this);
  }

  componentWillReceiveProps(np){

  }

  componentDidMount(){
    // query options - region, locality, type, key type
    this.props.request('permit-search-options.php', {}, function(r){
      if(r.ok){
        this.setState({options: r.msg});
      }
    }.bind(this));
  }
  startDateChange(d){
    this.setState({startDate: moment(d).format("YYYY-MM-DD HH:mm:ss")});
  }
  endDateChange(d, other){
    this.setState({endDate: moment(d).format("YYYY-MM-DD HH:mm:ss")});
  }
  onSearchClick(){
    l('search was clicked');
    //alert('sdsds');        

    // gather data - request to permit-search, display below
    var data = pluck(this.state, 'region', 'search', 'locality', 'key_type', 'type', 'endDate', 'startDate');
    // format dates into strings
    if(isset(data.startDate)){
      data.start_date = moment(data.startDate).format("YYYY-MM-DD HH:mm:ss");
    }
    if(isset(data.endDate)){
      data.end_date = moment(data.endDate).format("YYYY-MM-DD HH:mm:ss");
    }
    l('data is', data);
    // ajax - request for search
    this.props.request('permit-search.php', data, function(r){
      if(!r.ok){
        toastr.error("oops, something went wrong");
      }else{
        this.setState({results:r.msg,total:r.total});
      }
    }.bind(this));
  }
    onImportPermitClick() {
        jQuery(".modal-title").text('Import Permit');  
        jQuery(".modal-body").html('<form class="form-horizontal" action="" method="post" name="upload_csv_permit" id="upload_csv_permit" onsubmit="return false;" enctype="multipart/form-data"><input type="hidden" id="actio_url" value="Permity::saveImportCsvFile"><div class="form-group"><label for="email">Import CSV File:</label><input type="file" class="form-control" id="permit_csv_file"></div>  </form>');
        jQuery("#import_permit_modal").modal('show');
    }         

  render(){
    var toggle_checks = function(){
      var on = !dflt(this.state.results[0], {selected:false}).selected;
      var results = this.state.results.map(function(val, ndx){
        val.selected = on;
        return val;
      });
      this.setState({results: results,total:total});
    }.bind(this);

    //alert(this.state.total);

    var add_to_print = function(){
      // ajax this to print_qs
      var records = this.state.results.reduce(function(curr, val){
        if(val.selected){
          curr.push(val.id);
        }
        return curr;
      }, []);

      this.props.request('add-to-print-cart.php', {records:records, record_type:0}, function(r){
        if(!r.ok){
          toastr.error("oops, something went wrong");
        }else{
          toastr.success(r.msg);
        }
      }.bind(this));
    }.bind(this);
    return (
        <div className="permits pt-4">
          <div className='form-group row'>
            <div className="col-md-8 col-md-offset-2">
              <Input name="search" label="Search" value={this.state.search}
                onChange={onChange.bind(this)} placeholder='Search...' />
            </div>
            <div className="col-md-12"></div>
            <div className="col-md-3">  
              <Select name="region" onChange={onChange.bind(this)} value={this.state.region}
                options={this.state.options.regions} label="Region"></Select>
            </div>
            <div className="col-md-3">
              <Select name="locality" onChange={onChange.bind(this)} value={this.state.locality}
                options={this.state.options.localities} label="Locality"></Select>
            </div>
            <div className="col-md-3">
              <Select name="key_type" onChange={onChange.bind(this)} value={this.state.key_type}
                options={dflt(this.state.options.key_types, []).map(function(val){ return val.val; })} label="Key Type"></Select>
            </div>
            <div className="col-md-3">
              <Select name="type" onChange={onChange.bind(this)} value={this.state.type}
                options={this.state.options.project_types} label="Type"></Select>
            </div>
            <div className="col-md-4">
              <label htmlFor="from">Start Date</label> <br/>
              <DatePicker
                  selected={isset(this.state.startDate)?new Date(this.state.startDate):null}
                  onChange={this.startDateChange}
                  maxDate={isset(this.state.endDate)?new Date(this.state.endDate):null}
                  placeholderText="From..."
                />
            </div>
            <div className="col-md-4">
              <label htmlFor="from">End Date</label> <br/>
              <DatePicker
                  selected={isset(this.state.endDate)?new Date(this.state.endDate):null}
                  onChange={this.endDateChange}
                  minDate={isset(this.state.startDate)?new Date(this.state.startDate):null}
                  placeholderText="To..."
                />
            </div>
            <div className="col-md-4">
              <Select name="order_by" onChange={onChange.bind(this)}
                value={this.state.order_by} label="Report By"
                options={[
                  {id:'localities.name', name:'Locality'},
                  {id:'permit_no', name:'Permit #'},
                  {id:'project_types.name', name:'Type'},
                  {id:'issue_date', name:'Date'},
                  {id:'owner_name', name:'Owner'},
                  {id:'contractor_name', name:'Contractor'},
                  {id:'mla_name', name:'MLA'},
                  {id:'jobvalue', name:'Value $'}
                ]} />
            </div>
          </div>
          <div className="row mb-4">
            <div className="col-md-6 col-md-offset-3">
              <div className="btn btn-primary btn-lg mt-2" onClick={this.onSearchClick}
                style={{width:'100%'}}>Search</div>
            </div>
          </div>

          <div className="row mb-4">
            <div className="col-md-6 col-md-offset-3">
              <div className="btn btn-primary btn-lg mt-2" onClick={this.onImportPermitClick}
                style={{width:'100%'}}>Import Permit</div>
            </div>
          </div>

          <div className="row mt-4 permit-results">
            <div className="col-xs-6">
              <div className="btn btn-default btn-md" onClick={toggle_checks}
                >Toggle All</div>
            </div>
            <div className="col-xs-6 text-right">
              <div className="btn btn-success btn-md float-right" onClick={add_to_print}
                ><i className="fas fa-plus"></i> Add to Print Cart</div>
            </div>
            <div className="col-xs-12 p-2">
              <Table striped bordered hover>
                <thead>
                  <tr>
                    <th>Select</th>
                    <th>Id</th>
                    <th>Value</th>
                    <th>Issue Date</th>
                    <th>Owner</th>
                    <th>Contractor</th>
                    <th>Claimant</th>
                    <th>Key Type</th>
                    <th>Description</th>
                    <th>Site Address</th>
                    <th>Legal Description</th>
                    <th>Comments</th>
                  </tr>
                </thead>
                <tbody>
                  {this.state.results.map(function(val, ndx){
                    // l('row-', val);
                    var onClick = function(e){
                      var results = this.state.results;
                      var result = results[ndx];
                      results[ndx].selected = !(val.selected);
                      this.setState({results:results});
                    }.bind(this)
                    return <tr className="item" onClick={onClick} key={ndx}>
                            <td> <i className={"far " + (val.selected?'fa-check-square-o':'fa-square-o')}></i> </td>
                            <td className="permit_no">{val.permit_no}</td>
                            <td className="job_value">${val.jobvalue}</td>
                            <td className="issue_date">{val.issue_date}</td>
                            <td className="owner_info">
                              {['name', 'address','city', 'state', 'zip', 'phone'].reduce(function(curr, vndx){
                                var v = val['owner_' + vndx];
                                if(!blank(v)){
                                  curr += v + " \n";
                                }
                                return curr;
                              }, '')}
                            </td>
                            <td className="contractor_info">
                              {['name', 'address','city', 'state', 'zip', 'phone'].reduce(function(curr, vndx){
                                var v = val['contractor_' + vndx];
                                if(!blank(v)){
                                  curr += v + " \n";
                                }
                                return curr;
                              }, '')}
                            </td>
                            <td className="contractor_info">
                              {['name', 'address','city', 'state', 'zip', 'phone'].reduce(function(curr, vndx){
                                var v = val['mla_' + vndx];
                                if(!blank(v)){
                                  curr += v + " \n";
                                }
                                return curr;
                              }, '')}
                            </td>
                            <td>{val.key_type}</td>
                            <td>{val.description}</td>
                            <td>{val.street}</td>
                            <td>{val.subdivision}</td>
                            <td>{val.comments}</td>
                          </tr>;
                  }.bind(this))}
                </tbody>
              </Table>
            </div>


                { (this.state.value>0) ? }  
                 <div className="col-xs-12 pull-right">
                            <Pagination>
                              <Pagination.First />
                              <Pagination.Prev />
                              <Pagination.Item>{1}</Pagination.Item>
                              <Pagination.Ellipsis />

                              <Pagination.Item>{10}</Pagination.Item>
                              <Pagination.Item>{11}</Pagination.Item>
                              <Pagination.Item active>{12}</Pagination.Item>
                              <Pagination.Item>{13}</Pagination.Item>
                              <Pagination.Item disabled>{14}</Pagination.Item>

                              <Pagination.Ellipsis />
                              <Pagination.Item>{20}</Pagination.Item>
                              <Pagination.Next />
                              <Pagination.Last />         
                            </Pagination>  
                      </div>     



          </div>
        </div>
    )

  }
}


export default Permits;

The react documentation has a page dedicated to conditional rendering: reactjs.org/docs/conditional-rendering.html — user310988
– user310988, Commented Feb 12, 2019 at 10:06

stasdes · Accepted Answer · 2019-02-12 09:25:57Z

1

if you want to add condition to render in react this is the syntax:

   render () {
     return (
       <div>
         {this.state.condition
         ? (<div>positive</div>)
         : (<div>negative</div>)}
       </div>
     )
   }

your code though have a lot of anti patterns like: use of setState inside render, defining functions inside render and more, this can cause performance issues. also consider writing the code with es6. it is much clearer and more readable instead of binding each function you can simply use arrow self binded function syntax

answered Feb 12, 2019 at 9:25

stasdes

6894 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stasdes Over a year ago

your code is : { (this.state.value>0) ? } <div className="col-xs-12 pull-right"> it should be like this: {this.state.value > 0 && ( <div className.... </div>)} if you use a ternary expression it must have the 'else' version a ? b : c if you want only the 'if' expression without else you can use the && syntax like this: boolExp && <div>a</div>

Collectives™ on Stack Overflow

getting error in if else condition in react js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related