make onclick inside map reactjs

Question

hi guys i try to make onclick inside map looping , so the onclick inside the div , but i got error , infinite looping

here the code

{arrayqueue.map((item, index) => {
                  return (
                    <div className="row-queue" key={index} onClick={setMyvideo(item.videoname)}>
                      <div className="column1-queue">{index + 1}</div>
                      <div className="column2-queue">{item.title}</div>
                      <div className="column3-queue">{item.singer}</div>
                    </div>
                  );
                })}

can someone help me why this is error ?

can you share you setMyvideo function and also the error msg — Jerryc
– Jerryc, Commented Nov 6, 2020 at 4:27
You need to pass a function which calls setMyVideo, not a function call directly. So it should be onClick={() => setMyvideo(item.videoname)} — Jayce444
– Jayce444, Commented Nov 6, 2020 at 4:28
@Jayce444 its fine if setMyvideo is a HOF which returns a function — Jerryc
– Jerryc, Commented Nov 6, 2020 at 4:29
@Jerryc yes that's true, I just assumed it wasn't since this seemed like a beginner asking, and they tend not to use HOFs very much. But yes Riky, you can add your setMyVideo definition if this doesn't fix it to help clarify things. And include the specifics of your error message, it's exact text, where in the code it's happening, etc. — Jayce444
– Jayce444, Commented Nov 6, 2020 at 4:31

topdev87 · Accepted Answer · 2020-11-06 04:34:39Z

1

https://reactjs.org/docs/hooks-state.html

const [myvideo, setMyvideo] = useState(...)

...

{arrayqueue.map((item, index) => {
  return (
    <div className="row-queue" key={index} onClick={() => setMyvideo(item.videoname)}>
      <div className="column1-queue">{index + 1}</div>
      <div className="column2-queue">{item.title}</div>
      <div className="column3-queue">{item.singer}</div>
    </div>
  );
})}

edited Nov 6, 2020 at 4:34

answered Nov 6, 2020 at 4:28

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

make onclick inside map reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related