BayLife BayLife - 4 months ago 19
React JSX Question

Can´t access button value using material-ui

I have to access the value of a button, because it holds the ID which is needed for further progress.

I first used a normal button with some bootstrap styles and everything worked fine.

<button
value={row.vacationRequestID}
className="btn btn-warning"
onClick={myRef.handleDeclineClick.bind(myRef)}>No
</button>

handleDeclineClick(e, value) {
console.log("decline");
console.log(e.target.value) //ID: 120
// this.props.declineClick(e);
//dispatch(requestStatusUpdate(e.target.value, declined, reason))
}


Now after using the material-ui, I can´t access the value anymore.

<IconButton
iconClassName="material-icons"
tooltip="Ablehnen"
value={row.vacationRequestID}
ref={"dd"}
onClick={myRef.handleDeclineClick.bind(myRef)}
>
thumb_down
</IconButton>


I have tried to access it via ref, but not even this is working anymore. Can someone explain me why? The Documentation doesn´t say anything about value.

Answer

MaterialUI doesn't use any value prop. So when you set the value prop to the IconButton, it means essentially nothing.

If you'd want to pass any value to the onClick call back function, bind the value to the function. So when it is called, you'll get it as the first argument.

myRef.handleDeclineClick.bind(myRef, row.vacationRequestID)
Comments