Issue

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

Solution

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>
)) }

Answered By - Sean Whelan
Answer Checked By - - David Goodson (ReactFix Volunteer)

Tuesday, December 6, 2022

[FIXED] why my react hook(usestate) not rendering?

Issue

Solution

Featured Post

Is Learning React Difficult?

Total Pageviews