i'm using django restframework for my server side, i have fetch my datas on ReactJS, set it using "setPosts", consoled my response and i am getting my require response but when i try to render it in my return() block. i am not getting the data. rather i am having a blank page.
i am using a windows 11 and python 3.11.0
import React,{Component,useState,useEffect,useRef} from "react";
import user_img from '../1.jpeg';
import music_img from '../2.jpg';
import music from '../Victony.mp3';
import { Button } from "@mui/material";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlay,faPause,faForward,faBackward } from '@fortawesome/free-solid-svg-icons';
import WaveSurfer from 'wavesurfer.js';
import AudioPlayer from 'react-modern-audio-player';
import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min";
import TimelinePlugin from "wavesurfer.js/dist/plugin/wavesurfer.timeline.min";
import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.min";
// import MyCustomPlugin from 'my-custom-plugin-path';
// const WaveFormOptions=ref=>({
// barWidth: 3,
// cursorWidth: 1,
// container: ref,
// // backend: 'WebAudio',
// height: 80,
// progressColor: '#2D5BFF',
// responsive: true,
// waveColor: '#EFEFEF',
// cursorColor: 'transparent',
// });
const Home=()=>{
const audio=document.querySelector('#audio')
const music_container=document.querySelector('#music_container')
const [image, setImage]=useState('')
const [posts, setPosts]=useState([])
const [icon,setIcon]=useState(faPlay)
const[playing,setPlaying]=useState(false)
// const progress=useRef()
const[progress,SetCurrentProgress]=useState(0)
function getAllPosts(){
fetch(`http://127.0.0.1:8000/`)
.then(response=>response.json())
.then(data=>{
console.log(data)
setPosts(data)
})
}
// console.log(posts.artist_name)
// LOAD ALL POSTS
// function soundrimage(){
// // setImage(music_img)
// }
useEffect(()=>{
getAllPosts()
// console.log(this)
},[])
// LOAD AND CONTROL MUSIC
function playSong(){
music_container.classList.add('play')
setIcon(faPause)
setPlaying(true)
audio.play()
}
function pauseSong(){
music_container.classList.remove('play')
setIcon(faPlay)
setPlaying(true)
audio.pause()
}
function playPause(){
let isplaying=music_container.classList.contains('play')
if(isplaying){
pauseSong()
}else{
playSong()
}
}
const UpdateProgress=(e)=>{
// console.log(e.target.duration)
const {duration,currentTime}=e.target
const ProgressPercent=(currentTime/duration)*100
SetCurrentProgress(`${ProgressPercent}`)
}
// console.log(progress.current)
const setProgress=(e)=>{
const width=e.target.clientWidth
// console.log(e)
const clickX=e.nativeEvent.offsetX
// console.log(clickX)
const duration=audio.duration
// console.log(duration)
audio.currentTime=(clickX/width)*duration
}
// MUSIC INFO
// const music_image= document.querySelector("#music_image")
return(
<body>
<Navbar/>
<main className="landing">
{posts.map(post=>{
<div className="music_container" onClick={playPause} id="music_container">
<img id="music_image" src={'http://127.0.0.1:8000'+post.image} />
<button >
<FontAwesomeIcon icon={icon} id="playBtn" />
</button>
<audio src='' id="audio" onTimeUpdate={e=>UpdateProgress(e)}/>
<p className="caption">{post.title}</p>
<p>{post.title}</p>
</div>
console.log(post.image)
}
)}
</main>
<Play image={image}
playing={playing}
playpause={playPause}
playicon={icon}
progress={progress}
setProgress={e=>setProgress(e)}
/>
</body>
)
}
export default Home
The issue here is with your map function. Try the following syntax:
{ posts.map((post) => (
<div className="music_container" onClick={playPause} id="music_container">
<img id="music_image" src={'http://127.0.0.1:8000'+post.image} />
<button>
<FontAwesomeIcon icon={icon} id="playBtn" />
</button>
<audio src='' id="audio" onTimeUpdate={e=>UpdateProgress(e)}/>
<p className="caption">{post.title}</p>
<p>{post.title}</p>
</div>
)) }
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments