Liondancer Liondancer - 1 year ago 70
React JSX Question

Accessing key property value within react dumb component

How can I access my

property value inside my dumb component?

I have this dumb component:

const TagSummary = ({ tags, highlightTag }) => {
if (!tags) {
return <div />;
return (
{Object.keys(tags).map((tag) => {
return (
<div key={ tag }>
<button type="button" onClick={ highlightTag }>
<pre>&lt;{ tag }&gt;</pre>
<p>{ tags[tag] }</p>


The method that I pass into it is this:

highlightTag(event) {

I want to be able to retrieve the
property in order to perform some other type of logic. How can I retrieve it

Answer Source

It isn't the best way to do it, instead you should have button be a seperate component where you can pass the onclick and the key as props and then in the button component merge the two together. The quick and dirty way is as follows

<button type="button" onClick={ highlightTag.bind(this, tag) }>

that will make sure that that argument is always provided to the highlightTag function.

The problem with this though is when React checks to see if anything has changed with the component it will always return true because of the function binding in the render method. If you aren't worried about performance you can leave it that way but that is the pitfall of using the binding in the render method

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download