Get id from one form out of multiple forms? (React)

Question

I am trying send only one of my form's id to my handleSubmit function in react. My forms are created via a map function, which creates a form for each data enter from my DB. My handleSubmit function currently take in an event and outputs it to the console log. When running the code, I get all of my id's instead of one. Any help?

Here is my code:

import React, { useRef, useState } from 'react';

export const Movie = ({listOfReviews}) =>{


   const handleSubmit = (event) => {
       console.log(event)
   }

   return (
       <>
       <h1>Your reviews:</h1>
    
       {listOfReviews.map(review =>{
       return(
           <form  onSubmit={handleSubmit(review.id)}>
             <label>
                Movieid:{review.movieid}               
               <input type="text" value={review.id} readonly="readonly" ></input>
               <input type="text" value={review.comment}></input>
               <input type="submit" value="Delete"></input>
             </label>
          </form>
       )
       })}
       </>
   )
   }

Answer 1

You have a simple error in your onSubmit callback. Instead of calling handleSubmit in the callback prop, you should instead define an inline function that calls handleSubmit.

Like this:

<form onSubmit={() => handleSubmit(review.id)}>

Full code:

import React, { useRef, useState } from 'react';

export const Movie = ({ listOfReviews }) => {
  const handleSubmit = (id) => {
    console.log(id);
  };

  return (
    <>
      <h1>Your reviews:</h1>

      {listOfReviews.map((review) => {
        return (
          <form onSubmit={() => handleSubmit(review.id)}>
            <label>
              Movieid:{review.movieid}
              <input type="text" value={review.id} readonly="readonly"></input>
              <input type="text" value={review.comment}></input>
              <input type="submit" value="Delete"></input>
            </label>
          </form>
        );
      })}
    </>
  );
};