0
sortedReports.map(item => {

    return (
    <tr key={item.rowNumber}>
        <td>  {item.year}</td>

        <td> {item.month}</td>

        <td> {item.bruto_ukupno}</td>
        <td> {item.neto_plata}</td>
        <td> {item.topli_obrok}</td>

        <td> {item.doprinosi}</td>
        <td> {parseInt(item.ukupno_plata)}</td>

        <td className="table-actions">
            <Link **onClick={}**

                    to={`/reports/details`}>
                <PieChart size="21"/>
            </Link>

        </td>
    </tr>
)});

I need to get the clicked, store its value and pass it to another component where I need to filter employees depending on which reports month was clicked.

THANK YOU SO MUCH :)

Dženis H.
  • 7,284
  • 3
  • 25
  • 44
  • I mean, without knowing the relationship between this component and the other it's hard to say. Assuming the function to filter by month is passed as a prop, the basic answer is `this.props.filterByMonth(item.month)}.../>`. However, without knowing the context and component hierarchy, we can't say how to filter things by months. That could be a whooooole thing – Jayce444 Apr 03 '18 at 10:29

2 Answers2

1

I would utilize currying to create functions "bound" (but not in the .bind sense) to the value of that item. i.e.

// as a class method
const createClickHandler = (itemValue) => e => {
   //...doStuff
};

Then utilize it by passing the item value when mapping.

<Link onClick={this.createClickHandler(item)}
      to={`/reports/details`}>
      <PieChart size="21"/>
</Link>
Matt Condit
  • 27
  • 2
0

You can pass the item as an extra argument to bind(). List his:

sortedReports.map(item => {

    return (
    <tr key={item.rowNumber}>
        <td>  {item.year}</td>

        <td> {item.month}</td>

        <td> {item.bruto_ukupno}</td>
        <td> {item.neto_plata}</td>
        <td> {item.topli_obrok}</td>

        <td> {item.doprinosi}</td>
        <td> {parseInt(item.ukupno_plata)}</td>

        <td className="table-actions">
            <Link onClick={this.handleClick.bind(this,item)}
                to={`/reports/details`}>
                <PieChart size="21"/>
            </Link>

        </td>
    </tr>
)});

And then handleClick might look like this:

handleClick(item) {
    // Do what you want on click
}

I'm binding the entire selected object here, but you could bind just the item.rowNumber if that makes the code cleaner elsewhere.

smee
  • 231
  • 1
  • 5
  • Thank you @smee so much. I'm not trying to be rude now, but what would be a great way to pass THAT value from this Reports component to another component ReportsDetails so I can do additional filtering. State, params, something else? You already helped so much. Cheers. – Dženis H. Apr 03 '18 at 11:02
  • [link](https://stackoverflow.com/questions/49629053/whats-the-easiest-way-to-pass-a-single-value-between-2-react-components) – Dženis H. Apr 03 '18 at 11:38
  • 1
    You're welcome! In React, you generally pass things up or down (not sideways), so either (a) pass it down to the props of a subcomponent in render() or (b) pass it up to a parent by calling one of your own props (something like `this.props.onSelectItem(item)`). You might find my earlier answer on state management (https://stackoverflow.com/questions/49583761/state-management-in-reactjs/49588360#49588360) helpful. – smee Apr 03 '18 at 11:51