title: How to pass api response data to video player
body: <p>Here is the data i got from API and its array.</p>
  <pre><code>0: &quot;/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video13.mp4&quot;
  1: &quot;/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video22.mp4&quot;
  2: &quot;/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video6.mp4&quot;
  3: &quot;/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video19.mp4&quot;
  4: &quot;/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video9.mp4&quot;
  </code></pre>
  <p>now i want to convert this as video URl and pass to react video player</p>
  <p>My code :</p>
  <pre><code>import React, { Component } from 'react'
  import axios from 'axios'
  import Video from './Video'
  
  class PostForm extends Component {
      constructor(props) {
          super(props)
  
          this.state = {
              key: '',
              
              // Where data will be saved.
              data: [],
          }
          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; {
                          // Updating the state to trigger a re-render       
              this.setState({data: response.data});
              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;
              {this.state.data.map((videoURL) =&gt; &lt;video src={videoURL}&gt;&lt;/video&gt;)}
              &lt;/div&gt;
      
              &lt;/div&gt;&lt;/center&gt;
          )
      }
  }
  export default PostForm
  </code></pre>
  <p>How to convert this text as URl and play on video player</p>
  <p>For more code refernce:<a href="https://codesandbox.io/s/agitated-einstein-yelvj?file=/src/dateapi.js" rel="nofollow noreferrer">click here</a></p>
  <p>Expecting answers for :</p>
  <p>1.How to fetch api data on webpage</p>
  <p>2.Convert into URL , and pass to play on videoplayer</p>