Как получить данные элемента по клику в итерации?

Question

[EmKotlety]

При клике на ячейку таблицы нужно получить данные значения этой ячейки.
Вот data которая итерируется. В функции handleChange не видно данных userItem

let briefingType = [
    { type: 'elevation',
            users: [
                {userid : '1', userName: 'vasia', date: 'thursday'},
                {userid: '2' ,userName: 'ivan', date: 'monday'},
                {userid: '3' ,userName: 'petro', date: 'false'},

            ] 
    }
    , 
    {type: 'tools', 
            users: [
              {userid : '1', userName: 'vasia', date: 'sunday'},
              {userid: '2' , userName: 'ivan', date: 'false'},
              {userid: '3' , userName: 'petro', date: 'monday'},
            ]  
    },
    {type: 'drugs', 
            users: [
              {userid : '1',userName: 'vasia', date: 'false'},
              {userid: '2' ,userName: 'ivan', date: 'false'},
              {userid: '3' ,userName: 'petro', date: 'monday'},
            ] 
    }
]

вот сам функция:

export default function StickyHeadTable() {
  const [briefingDate, setBriefingDate] = React.useState("вапвп")
  const [workerData, setWorkerData] = React.useState('')
  const context = React.useContext(Context)
  console.log('контекст', context)
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);
  const [time, setTime] = React.useState('')
  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };
  function handleChange(event, userItem){
    setBriefingDate(event.target.value)

    
  console.log('userItem',  userItem)

  }

  return (
    <div style={{display: 'flex', alignItems: 'center',  marginTop: "100px", flexDirection: "column" }}>
        <Paper sx={{ maxWidth: 'md', overflow: 'hidden' }}>
          {briefingDate}
        <TableContainer sx={{ maxHeight: 440 }}>
            <Table stickyHeader aria-label="sticky table">
            <TableHead >
                
                <TableRow>

                  <TableCell style = {{borderRight: "1px solid rgba(224, 224, 224, 1)"}} align="center" rowSpan={2}>
                    Briefing type
                  </TableCell>
                  <TableCell align="center" colSpan={3} >
                    UserName
                  </TableCell>
                </TableRow>
                <TableRow>
                     {columns.map((column) => (
                    <TableCell
                    key={column.id}
                    align={column.align}
                    // style={{ minWidth: column.minWidth }}
                    >
                    {column.label}
                    </TableCell>
                ))}
                </TableRow>
            </TableHead>
            <TableBody>
             
                {
                  briefingType.map((row)=>{
                    return(
                      <TableRow hover role="checkbox" tabIndex={-1} key={row.type}>
                         <TableCell /* key={column.id} */ > {row.type}</TableCell>
                         {row.users.map((userItem)=>{
                           return(
                             <HtmlTooltip
                              title={
                                <React.Fragment>
                                  <input onChange = {(event, userItem)=>handleChange(event, userItem)} type="date"/>

                                </React.Fragment>
                              }
                             >
                            <TableCell  onClick={ (userItem)=>alert('привет', userItem)}/* key={column.id} */ > {userItem.date}</TableCell>
                            </HtmlTooltip>
                           )
                         })}
                      </TableRow>
                    )
                  })
                }
            </TableBody>
            </Table>
        </TableContainer>
        <div style={{  display: "flex", justifyContent: "space-around" }}>
            <Button onClick={context.openCreateTypeFunction} style={{backgroundColor:"#0000ff70", }}variant="outlined">Cssdfreate type</Button>
            <Button  style={{backgroundColor:"#0000ff70", }} variant="outlined">Create new User</Button>
          </div>
        </Paper>
        
          
        
        <div>
                <input  type='date'/>
                <ServerRequestDatePicker/>
        </div>
    </div>
  );
}

Answer 1

[0xD34F]

onChange = {(event, userItem)=>handleChange(event, userItem)}

Убрать userItem из списка параметров: onChange={e => handleChange(e, userItem)}.

Или, onChange={handleChange.bind(userItem)},

function handleChange(e) {
  console.log('userItem', this);
  console.log('value', e.target.value);
}