Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 142267

React / Axios - "code": 400, "message": "Required parameter: part"

$
0
0

I'm trying to make a GET request to my youtube api, and I get this back, even though I have included "part" :

"code": 400, "message": "Required parameter: part"

and from the network tab:

{
 "error": {
  "errors": [
   {
    "domain": "global",
    "reason": "required",
    "message": "Required parameter: part",
    "locationType": "parameter",
    "location": "part"
   }
  ],
  "code": 400,
  "message": "Required parameter: part"
 }
}

Can anyone help me figure out what I did wrong here ?

Here are my files :

youtube.js

const KEY = "my api key";

export default axios.create({
  baseURL: "https://www.googleapis.com/youtube/v3",
  params: { 
      part: "snippet",
      maxResults: 5,
      key: KEY
  }
});

my app:

class App extends React.Component {
  state = {};

  onSearchSubmit = term => {
    const x = youtube.get("/search", {
      params: {
        q: term
      }
    });
    console.log(x);
  };

  render() {
    return (
      <div className='ui container'>
        <SearchBar onFormSubmit={this.onSearchSubmit} />
      </div>
    );
  }
}

and finally my SearchBar.js :

class SearchBar extends React.Component {
  state = { term: "" };

  onInputChange = event => {
    this.setState({ term: event.target.value });
  };

  onformSubmit = event => {
    event.preventDefault();
    this.props.onFormSubmit(this.state.term);
  };

  render() {
    return (
      <div className='ui segment search-bar'>
        <form onSubmit={this.onformSubmit} action='' className='ui form'>
          <div className='field'>
            <label htmlFor=''>Video Search</label>
            <input
              value={this.state.term}
              type='text'
              onChange={this.onInputChange}
            />
          </div>
        </form>
      </div>
    );
  }
}

Been trying to figure it out without any luck. ( I know I'm not saving the fetch response, I just wanted to test the GET first before I do that. )

Thanks !!!


Viewing all articles
Browse latest Browse all 142267

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>