Not getting response on fetching an API

Question

I am trying to fetch an API, first I got an error saying message port closed before a response was received, but then I removed all the extensions, now that error is removed but still not getting response from the API.

My code

import React from "react";
import "./form.scss";

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            term: "",
            getdata: []
        }
    }
    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
    };
    componentDidMount() {

    }
    submit = (e) => {
        const { term } = this.state;
        const rawUrl="https://mashape-community-urban-dictionary.p.rapidapi.com/define?term="+term;
        const url=rawUrl;
        fetch(url, {
            "method": "GET",
            "headers": {
                "x-rapidapi-host": "mashape-community-urban-dictionary.p.rapidapi.com",
                "x-rapidapi-key": "c8cb6b8cccmshc02b57f0b5a8c98p1516cdjsnb64d72a5ad33"
            }
        })
            .then(response => {
                response.json();
                console.log(response);
            })
            .then(data=>{
                console.log(data);
            })
            .catch(err => {
                console.log(err);
            });
    }
    render() {
        console.log(this.state.term)
        return (
            <div class="Card">
                <div class="CardInner">
                    <label>Search for your word........</label>
                    <div class="container">
                        <div class="Icon">
                            <button onClick={this.submit}><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#657789" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg></button>
                        </div>
                        <div class="InputContainer">
                            <input placeholder="For Example: Education" value={this.state.term} name="term" onChange={this.handleChange} />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default Form;

Can anyone solve this problem, I am stuck on this for a long time.

Answer 1

You need to return the response.

.then(response => {
  return response.json();               
})