CODEWITHSUNDEEP
reactjsmaterial-uitickertiktok
Priyansh Sharma
Priyansh Sharma

Reputation: 19

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. Error

    import React,{useEffect} from 'react';
    import '../VideoFooter.css';
    import disc from './static/disc.png';
    import MusicNoteIcon from '@material-ui/icons/MusicNote';
    import Ticker from 'react-ticker'

    const VideoFooter = () => {
      return (
        <div className='videoFooter'>
          <div className="videoFooter_text">
            <h3>@priyansh21</h3>
            <p>Mindset is key to success</p>
            <div className="video_footer_ticker">
              <MusicNoteIcon className='video_footer_icon'/>
              <Ticker mode='smooth'>
                 {({index}) => (
                   <>
                      <p>This is the Headline of element #!</p>
                   </>
                 )}
              </Ticker>
            </div>
          </div>
          <img className='videoFooter_record' src={disc} alt="" />
        </div>
      )
    }

    export default VideoFooter;

I was implementing footer ticker functionality like insta reels and youtube shorts or tiktok and I used this ticker component here which will continuously move from left to right while watching video when I run it, it runs once and then after that error comes in the console that update depth exceed. Can anyone tell me the solution for this?

Upvotes: 0

Views: 148

Answers (0)

Related Questions