How to render a component (Immediately) from two different input events?

Question

This question is related to this SO post.

I have two event handler (<select onChange={this.groupBySelector}> and <DateSelector dateOnSelect={this.urlProducer}/>) in a single class QuarterToDate.
In the above mentioned class, user is provided with two features ie A Select Option and A Date Selector. Both of this event triggers this.setState(). But, the component is re-rendering in only one of them ie <select onChange={this.groupBySelector}>. What should I do?

QuarterToDate class:

import React, { Component } from 'react';
import '../App.css';
import DisplayInvoice from './displayInvoice';
import DisplayCustomer from './displayCustomer';
import DisplayMonth from './displayMonth';
import DateSelector from './dateSelector';

var axios = require('axios');

class QuarterToDate extends Component {

  constructor(props){
    super(props);
    this.state = {
      data:null,
      invoiceType:'invoice',
      urlInvoices:'',
      urlCustomer:'',
      isDateSet:false
    }
    //console.log(this.props.location.state.token);
     this.groupBySelector = this.groupBySelector.bind(this);
  }

  groupBySelector(event){
    if ((event.target.value)==="invoice"){
      this.setState({invoiceType:'invoice'})
    } else if ((event.target.value)==="customer") {
      this.setState({invoiceType:'customer'})
    } else if ((event.target.value)==="month") {
      this.setState({invoiceType:'month'})
    } else {
      this.setState({invoiceType:'invoice'})
    }
  }

  urlProducer = (date) => {
    this.setState({
      urlInvoices: ("http://localhost:3000/api/invoices"+date),
      urlCustomer: ("http://localhost:3000/api/invoices"+date+"&group-by=customerNumber"),
      isDateSet: true
    }, () => {console.log(this.state.urlCustomer);});
  }

  render() {
    return (
      //<DateSelector />
      <div>
      <DateSelector dateOnSelect={this.urlProducer}/>
      <select onChange={this.groupBySelector}>
        <option value="invoice">GROUP BY INVOICE</option>
        <option value="customer">GROUP BY CUSTOMER</option>
        <option value="month">GROUP BY MONTH</option>
      </select>
        <GroupBy token={this.props.location.state.token} invoiceType={this.state.invoiceType} isDateSet={this.state.isDateSet} urlInvoices={this.state.urlInvoices} urlCustomer={this.state.urlCustomer}/>
      </div>
    );
  }
}

export default QuarterToDate;

function GroupBy(props) {
  if (props.invoiceType=='invoice') {
    return <DisplayInvoice token={props.token} url={(props.isDateSet) ? (props.urlInvoices) : "http://localhost:3000/api/quartertodate"}/>;
  } else if (props.invoiceType=='customer') {
    console.log(props.isDateSet);
    return <DisplayCustomer token={props.token} url={(props.isDateSet) ? (props.urlCustomer) : "http://localhost:3000/api/quartertodate?group-by=customerNumber"}/>;
  } else if (props.invoiceType=='month') {
    return <DisplayMonth token={props.token}/>;
  }
}

Code for DateSelector component:

import React, { Component } from 'react';
import '../App.css';
import Moment from 'moment';

class DateSelector extends Component {

  constructor(props){
    super(props);
    this.state = {
      startDate:"",
      endDate:""
    }
  }

  dateHandler = (event) => {
    this.props.dateOnSelect("?startDate="+Moment(this.state.startDate).format('YYYY/MM/DD')
    +"&endDate="+Moment(this.state.endDate).format('YYYY/MM/DD'));
  }

  startDateOnChange = (event) => {
    this.setState({startDate: event.target.value});
  }

  endDateOnChange = (event) => {
    this.setState({endDate: event.target.value});
  }

  render() {
    return (
      <div>
        START DATE<input type="date" id="startDate" value={this.state.startDate} onChange={this.startDateOnChange}/>
        END DATE<input type="date" id="endDate" value={this.state.endDate} onChange={this.endDateOnChange}/>
        <button type="submit" onClick={this.dateHandler}>Submit</button>
      </div>
    );
  }
}

export default DateSelector;

@Chris I just did. kindly let me know if I need to post anything else. — noobie, Sep 18 '17 at 08:10
Can you kindly share the code for your `````` component, so that the community can help you more. — Adeel Imran, Sep 18 '17 at 08:37
In your ```this.dateHandler``` func try doing event.preventDefault(); then try consoling that the data is being passed or not in that function. — Adeel Imran, Sep 18 '17 at 09:52
@AdeelImran it is passing data to `urlProducer` of `QuarterToaDate` class successfully. I've logged it. — noobie, Sep 18 '17 at 10:05
Try doing it like this urlProducer = (date) => { const invoice = `http://localhost:3000/api/invoices${date}` const cust= `http://localhost:3000/api/invoices${date}&group- by=customerNumber`; this.setState({ urlInvoices: invoice, urlCustomer: cust, isDateSet: true }); } — Adeel Imran, Sep 18 '17 at 10:07

Adeel Imran · Answer 1 · 2017-09-18T11:08:01.623

0

Try doing it like this

urlProducer = (date) => {
    const invoice = `http://localhost:3000/api/invoices${date}`
    const cust= `http://localhost:3000/api/invoices${date}&group-
                         by=customerNumber`;
    this.setState({
      urlInvoices: invoice,
      urlCustomer: cust,
      isDateSet: true
    });
    this.forceUpdate()
  }

Does this work?

edited Sep 18 '17 at 11:08

answered Sep 18 '17 at 10:10

Adeel Imran

13,166
8
62
77

No this doesn't work. It work as before. IE. the page doesn't get re-rendered immediately – noobie Sep 18 '17 at 10:43
I have updated my answer, try doing it like this. This is not a good approach. But this should work. – Adeel Imran Sep 18 '17 at 11:08
Same behavior. Not updating immediately. – noobie Sep 18 '17 at 11:21
as soon as I use `select` tag of HTML ie whenever `groupBySelector` function is evoked. – noobie Sep 18 '17 at 11:23
but it doesn't update on your ```DateSelector ``` component? – Adeel Imran Sep 18 '17 at 11:24
Yes. It saves the state. But page only get re-rendered whenever `groupBySelector` is called – noobie Sep 18 '17 at 11:26
In your dateHandler func trying doing this ```this.forceUpdate()``` after you call the prop method. – Adeel Imran Sep 18 '17 at 11:27
Tried this. Same issue persists. – noobie Sep 18 '17 at 11:52

How to render a component (Immediately) from two different input events?

1 Answers1