title: How to implement API search onClick
body: <p>My project is using React, Axios, and movieDB's API. I am trying to make it so that when I type out a movie title and either hit enter and/or click submit then the API will return the title of the movie searched for as an h1 element. </p>
  
  <p>currently, the code works as soon as I refresh the browser and the only way for it to function properly is if I go into the code and replace <code>${query}</code> with what I want to search for, ie <code>joker</code>. I have tried adding the onclick to the button : <code>&lt;button onclick="componentDidMount()"&gt;submit&lt;/button&gt;</code>. This did not do anything, however.</p>
  
  <p>App.js</p>
  
  <pre><code>import React from "react"
  import Movielist from './components/Movielist'
  
  
  
  function App() {
      return (
          &lt;div&gt;
              &lt;input type="search" /&gt;
              &lt;button onclick="componentDidMount()"&gt;submit&lt;/button&gt;
              &lt;h1 id="title"&gt;title&lt;/h1&gt;
              &lt;Movielist /&gt;
          &lt;/div&gt;
  
      )
  }
  
  export default App
  
  </code></pre>
  
  <p>Movielist.js</p>
  
  <pre><code>import React from 'react';
  
  import axios from 'axios';
  
  export default class Movielist extends React.Component {
    state = {
      title: ""
    }
  
    componentDidMount() {
      const API_KEY = '*****************';
      const query = document.getElementById('search');
      axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&amp;query=${query}`)
        .then(res =&gt; {
          const title = res.data['results'][0]['title'];
          this.setState({ title });
  
        })
    }
  
    render() {
      return (
  
      &lt;h1&gt;{this.state.title}&lt;/h1&gt;
  
      )
    }
  }
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  
  ReactDOM.render(
      &lt;App /&gt;,
      document.getElementById('root')
  );
  </code></pre>