Date format exception in reactjs

Question

i want to send an api request to some url with that i want to send two query params(start and end date). i used to two input tag for the dates and passed it to url but the "date format exception" is shown

//search page
state= {
    startDate: null,
    endDate: null
    };

    startDatePicker= event=>{
        event.preventDefault();
        var date= event.target.value;
      this.setState({
        startDate: date
      });
    }
     endDatePicker= (event)=>{
      event.preventDefault();
      let date= event.target.value;
      this.setState({
        endDate: date
      });
    }
    submitHandler= (event) =>{
        event.preventDefault();
        this.props.onSearchByDate(this.state.startDate, this.state.endDate);
    }
    render() {
        console.log(this.state.endDate);
        return (
            <div>
                <input type= "date" placeholder= "yyyy-mm-dd"
                 onChange= {this.startDatePicker} name= "startDate"/><br/>
                <input type= "date" 
                    onChange= {this.endDatePicker} name= "endDate"/>
                <button onClick= {this.submitHandler}>
                    Search</button>
            </div>
        );
    }
}
// api page
export const fetchByDate= (startDate, endDate) => dispatch =>{
    console.log(startDate);
    fetch("https://api.nasa.gov/neo/rest/v1/feed?start_date=startDate&end_date=endDate&api_key=[demokey]")
    .then(res => res.json())
    .then(data =>{
        console.log(data);
        return dispatch({
            type: actions.fetchByDates, data: data
        });
    });
}

Where exactly is the error message thrown? and what is exact error message? — mukesh210, Nov 25 '19 at 17:09
this is the error: {code: 400, http_error: "BAD_REQUEST", error_message: "Date Format Exception - Expected format (yyyy-mm-dd) - startDate - Unparseable date: "startDate"", request: "http://www.neowsapp.com/rest/v1/feed?start_date=startDate&end_date=endDate"} — komal jituri, Nov 25 '19 at 17:13
you need to use `Template Literals`(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to replace `startDate` and `endDate` in api call — mukesh210, Nov 25 '19 at 17:13
use it like this: fetch(\`https://api.nasa.gov/neo/rest/v1/feed?start_date=${startDate}&end_date=${endDate}&api_key=[demokey]\`) — mukesh210, Nov 25 '19 at 17:14
I tried but now it shows another error: Access to fetch at 'https://api.nasa.gov/neo/rest/v1/feed?start_date=${startDate}&end_date=${endDate}&api_key=[demokey]' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled — komal jituri, Nov 25 '19 at 17:16
https://stackoverflow.com/questions/28547288/no-access-control-allow-origin-header-is-present-on-the-requested-resource-err might be helpful — mukesh210, Nov 25 '19 at 17:18

score 1 · Answer 1 · answered Nov 25 '19 at 18:01

Change

"https://api.nasa.gov/neo/rest/v1/feed?start_date=startDate&end_date=endDate&api_key=[demokey]"

to

`https://api.nasa.gov/neo/rest/v1/feed?start_date=${startDate}&end_date=${endDate}&api_key=[demokey]`

You aren't passing in the values to the api, just strings. Changing it to the above with tick marks allows you to embed variables into the string directly with ${value} format

score 1 · Accepted Answer · answered Nov 25 '19 at 18:21

As @mukesh210 mentioned, for the first error, you need to use Template Literals in your fetch string. Please note that Template literals uses back-tick ( ` ) not single quote ( ' )

Change:

fetch("https://api.nasa.gov/neo/rest/v1/feed?start_date=startDate&end_date=endDate&api_key=[demokey]")

To:

fetch(`https://api.nasa.gov/neo/rest/v1/feed?start_date=${startDate}&end_date=${endDate}&api_key=[demokey]`)

For the second error, browsers usually does not support localhost (development environment) to go through the Access-Control-Allow-Origin, to bypass that, you have some options:

1. Alias your localhost to your domain. Depending on your PC, you need to change your hosts file. If you are on Windows, the path is C:\Windows\System32\drivers\etc\hosts. on Mac use your Terminal and type sudo nano /etc/hosts and just add:

127.0.0.1   localhost yourdomain.com

2. Use cors-anywhere your fetch should look like:

fetch(`https://cors-anywhere.herokuapp.com/https://api.nasa.gov/neo/rest/v1/feed?start_date=${startDate}&end_date=${endDate}&api_key=[demokey]`)

3. Use cors-js

Date format exception in reactjs

2 Answers2