title: How to fetch console date on webpage react axios
body: <p>How to fetch api data on web page using axios in react js,</p>
  <p>Expected :</p>
  <p>Via GET api call i get some response in console , now  i want to print that console data in the web page</p>
  <pre><code>import React, { Component } from 'react'
  import axios from 'axios'
  // import { data } from 'jquery'
  class PostForm extends Component {
      constructor(props) {
          super(props)
  
          this.state = {
              key: '',
  
              
          }
          console.log(this.state)
      }
  
      changeHandler = e =&gt; {
          this.setState({ [e.target.name]: e.target.value })
      }
  
      submitHandler = e =&gt; {
          e.preventDefault()
          
          axios
          .get(`http://127.0.0.1:8000/hvals_hash?key=${this.state.key}`)
          .then(response =&gt; {
              console.log(response.data)
          })
          .catch(error =&gt; {
              console.log(error)
          })
      }
  
      render() {
          const { key } = this.state
          
          return (
              &lt;center&gt;&lt;div&gt;
                  &lt;form onSubmit={this.submitHandler}&gt;
                      &lt;div&gt;
                          &lt;h2&gt; DATE PICKER&lt;/h2&gt;&lt;br&gt;&lt;/br&gt;
                          &lt;input
                              type=&quot;text&quot;
                              name=&quot;key&quot;
                              value={key}
                              onChange={this.changeHandler}
                          /&gt;
                          
                      &lt;/div&gt;
                      &lt;br&gt;&lt;/br&gt;
                      &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;&lt;/center&gt;
          )
      }
  }
  
  export default PostForm
  </code></pre>
  <p>NOTES :</p>
  <p>data in the console like Array data (24) </p>
  <p>[&quot;[&quot;/home/fraction/FastAPI/videos/video1.mp4&quot;, &quot;/home/fraction/FastAPI/videos/video2.mp4&quot;, &quot;/home/fraction/FastAPI/videos/video3.mp4&quot;, &quot;/home/fraction/FastAPI/videos/video4.mp4&quot;, &quot;/home/fraction/FastAPI/videos/video5.mp4&quot;]</p>