React: e.target.? logs undefined-CodePudding

I am trying to setState to q.content. However, it logs as undefined and I'm not sure how I'm using e.target incorrectly. It logs q.name fine.

I have a button that onClick calls a function that sets the constants.

<button
   onClick={handleDelete}
   value={q.id}
   name={q.name}
   content={q.content}
   >

In the function I have:

  function handleDelete(e) {
    e.preventDefault();
    setDeleteItem(e.target.value);
    setConfirmModal(true);
    setDeleteContent(e.target.content);
    setDeleteName(e.target.name);
    console.log(e.target.content);
  }

But it just doesn't seem to work.

CodePudding user response：

Not all attributes are available as DOM properties. While you can call e.target.value, you cannot call e.target.content in like manner. Instead, you'll need to access the element's attributes to get that value. To do so, check the e.target.attributes object, or use e.target.getAttribute.

CodePudding user response：

Try this to pass attribute value to the function:

function handleDelete(e) {
    console.log(e.target.getAttribute('content')) //'CONTENT!"
    setContent(e.target.getAttribute('content')) //set as state
}

<button
    onClick={handleDelete}
    content={'CONTENT!'}
></button>