Executing a state method from the stateless component

Question

I have a page component let's say HomePage . And I have two stateless components called List and ListRow . The idea is to show the Table with the list of items and when the user clicks on any particular row, hide the table and show the details of that particular row.

So in my HomePage render method:

<List data={listOfData} onClick={this.clickHanlder} />

The HomePage click handler method:

clickHandler(name) {
  console.log(name);
}

And in my List stateless component I do this:

const List = ({data, onClick}) => {
  return (
    <table>
      <thead>
        <tr>
          <td>Name</td>
        </tr>
      </thead>
      <tbody>
        {data.map(el => 
          <ListRow key={el.id} item={el} onClick={onClick} />
        )}
      </tbody>
    </table>
  );
}

And in my ListRow stateless component I do this:

const ListRow = ({item, onClick}) => {
  return (
    <tr>
      <td><a href="#" onClick={onClick(el.name)}>{el.name}</a></td>
    </tr>
  );
}

The click handler method in the HomePage executes once the page loads without even clicking on the row. When I click on the row, nothing happens.

I'm stuck at how and where to handle the click event, so that I hide the table and show the details of the row. I also should implement close / back button to show the table and hide the details.

What I have done so far is implementing the click event method in HomePage which will update its state and pass that method down till the ListRow stateless component. But when I load the app itself, the click event gets executed. I'm not sure how to handle this properly.

Answer 1

It's idiomatic in React to implement container components that will handle (for example) click events, population etc. So in your case you can create a handler for the row/item click in the List component and pass a reference to that down to the ListRow component as one of its props .

Even though it's stateless, your List component can still declare a function to handle the click; look at the example shown at the top of this article:

https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.9sxosb40u

However you can't use any of the React lifecycle methods or state. If you want to use these you would need to wrap it as shown here:

https://egghead.io/lessons/javascript-redux-fetching-data-on-route-change

Answer 2

I found the solution finally. I was doing it wrong. I've changed the clickHandler to as follows:

clickHandler(event) {
  console.log(event.target.innerHTML);
}

and in my ListRow stateless component, I'm doing this:

const ListRow = ({item, onClick}) => {
  return (
    <tr>
      <td><a href="#" onClick={onClick}>{el.name}</a></td>
    </tr>
  );
}

The mistake I was doing is that I was trying to pass the value to the onClick event which seems doesn't work. So using the innerHTML resolved the problem.