HTML5 Video not displaying video from axios react data fetch

Question

I am having issue with my video player page, not being able to find the data associated with the video file. I keep getting a 404 not found or a "undefined error coming from the axios code snippet of my code as that is where the console log for it is located. However, the object of data also appears in the console but the url remains undefined and so does the video player.

Here is the code for the backend, this is through the routing: upload.js:

const { sequelize, video } = require('../models');

    router.post("/getVideo", async (req, res) => {
        
            try {
                const getvideo = await video.findOne({
                    "_id" : req.body.videoId
                })
        
                return res.json(getvideo)
            } catch (err) {
                console.log(err)
                return res.status(500).json({ error: 'Something went wrong' });
            }
        })

The sequeilize console appears to be functional

Here is the code for the frontend: Detailvideopage.js

const DetailVideoPage = (props) => {
        let { videoId } = useParams();
        const [video, setVideo] = useState([]);
    
        const videoVariable = {
            videoId: videoId
        }
    
        useEffect(() => {
            axios.post('http://localhost:5000/api/upload/getVideo', videoVariable, {
                headers: {
                    'accept': 'application/json',
                },
            })
            .then(response => {
                if (response.data.success) {
                    console.log(response.data.video)
                    setVideo(response.data.video)
                    console.log(response.data.success);
                } else {
                    console.log(response.data);
                    alert('Failed to get video Info')
                }
        }).catch(error => {
                        console.log(error);
                    });
    
    }, []);
    
        return (
            <div className="postPage" style={{ width: '100%', padding: '3rem 4em' }} >
            <video style={{ width: '100%' }} src={`http://localhost:5000/${video.filePath}`} controls></video>
    
            </div>
        );
    }

Here is an image of the error I receive from my localhost page: localhost console

Here is the routes for the frontend: import DetailVideoPage from './components/views/DetailVideoPage/DetailVideoPage';

<Router>
      <Routes>
      <Route exact path='/video/:videoId' element={<DetailVideoPage />} />
      </Routes>
    </Router>

UPDATE: I have renamed the question to more accurately display the nature of the issue. The main issue is that even though the data is fetched, the video is not being displayed.

Answer 1

SOLUTION: I have found the solution with the advice of VC.One and a bit of research, much thanks to him!

I have refactored some of my code for my DetailVideoPage.JS:

function DetailVideoPage() {
  const [Video, setVideo] = useState([]);

  const videoId = useParams();

  const videoVariable = {
    videoId: videoId
  }

  useEffect(() => {

    const getSingleVideoData = async () => {
      axios.post('http://localhost:5000/api/upload/getVideo', videoVariable)
      .then(response => {
              console.log(response);
              setVideo(response.data.filePath);
            //   let myPath = response.data.filePath; 
            //   alert( "MP4 path is : " + myPath);
      })
      .catch(function (error) {
          console.log(error);
      });

    }
    getSingleVideoData();

  }, []);


  return (

    <>
      <Row>
          <Col lg={18} xs={24}>
          <div className="postPage" style={{ width: '100%', padding: '3rem 4em' }}>
          <video style={{ width: '100%' }} src={`http://localhost:5000/${Video}`} type='video/mp4' controls autoPlay muted />
          </div>
          </Col>
      </Row>

      </>
  )

}