Next.js Discord

Discord Forum

infinite render error

Answered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
i am getting this error and i cant seem to fix it. can someone help?
Answered by danim47c
Definately, the problem is that setVideo. You can achieve exactly the same by just removing that video state and checking !!files.length instead.
View full answer

17 Replies

Original message was deleted
American black bearOP
im doing it right now
hold on i just created the thread
  const [files, setFiles] = useState<FileWithPath[]>([]);
  const [video, setVideo] = useState(false)
  const previews = files.map((file, index) => {
    const imageUrl = URL.createObjectURL(file);
    setVideo(true)
    console.log(imageUrl)
    return  <video src={imageUrl}></video>;
  });

...

{video ? (
  previews
 ):(
  <Dropzone accept={{"video/*": [".mp4"]}} onDrop={setFiles}>
    <Text ta="center">Drop images here</Text>
  </Dropzone>

)}
@American black bear hold on i just created the thread
Sorry, I just saw it instantly 😅
@danim47c Sorry, I just saw it instantly 😅
American black bearOP
no worries haha
American black bearOP
its the code provided in here: https://mantine.dev/x/dropzone/#images-previews
edited for supporting video and im trying to make the dropzone disappear and the video preview appear instead
@danim47c It would be great if you could send more code but, I would bet it is related to that setVide(true) ran in a loop
American black bearOP
yeah the issue is there, i managed to figure that out
but i cant seem to find a solution to it..
Definately, the problem is that setVideo. You can achieve exactly the same by just removing that video state and checking !!files.length instead.
Answer
Then dropzone will only be rendered when there are no files
I dont know if that was what you wanted to do
American black bearOP
yeah thats what ive been trying to achieve for a while
thanks a lot im going to try right now
No problem, ping me out if that doesn´t solve your problem 🤝
American black bearOP
amazing, it works perfectly
thank you very much