Question 228077 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Get data in react from a map'd table array when a button in the row is clicked

I have a table of data in a React SPA. I’m using the Material-UI IconButton component to allow a user to delete a row in a list of reports.

latestReports.map((report) => (
<tr key={report.id}>
    <td>{report.author}</td>
    <td className="report-date-col">{report.post_date}</td>
    <td>{report.location}</td>
    <td className="report-body" dangerouslySetInnerHTML={{ __html: report.body }}></td>
    {props.canDelete && (
        <td>
            <IconButton value={report.id} onClick={onDeleteFavorite}>
                <DeleteIcon />
            </IconButton>
        </td>
    )}
</tr>

))

I want to use the report.id value in the onDeleteFavorite function. However, the event passed to the handler doesn’t seem to have the e.target.value property that I would normally use with an input HTML element.

How do I get the report.id value?

THX, Mike

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    OK, my bad.

    My standard practice is to include the id for the primary table in any query I write and use a standard query with a dynamic where clause for all queries in a RESTful service. However, I needed to restrict the result set to only the latest result for a given user and had some unique formatting needs for some columns. So I didn't use the standard query and forgot to add the id to the result set. Hence, the report.id was 'undefined' since it wasn't there.

    The approach suggested by Nazrul is exactly what I expected to work as well. It was what I wrote as my first cut when I added the DeleteIcon element.

    This proves that even guys with decades of experience can make rookie mistakes when they have no other team members to do sanity checks.

    Thanks, Nazrul. Your answer caused me to reevaluate my premises since it made 2 of us that thought that should work.

    Mike


  2. 0

    You are using the IconButton component and trying to pass the report.id value to the onDeleteFavorite function when the button is clicked. However, Material-UI IconButton component does not have a value prop, and the event object passed to the onClick handler is not the same as the event object you’d get from a regular HTML input element. Instead you can just simply pass the report.id directly to your onDeleteFavorite handler.

    <IconButton onClick={() => onDeleteFavorite(report.id)}>
  <DeleteIcon />
</IconButton>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search