How to add custom clickHandler for a specifc row

Question

To set the context, I am new to REACT. I am working on a sample app where I need to display the trade data in tabular format. If you select the row, delete button on the extreme right should be displayed. Otherwise it should be hidden.

Instead of toggling with the display button, I am just trying to show and hide a text first. I was able to do that. Only thing which happens is that the text gets toggled for all the rows.

I was trying number of things to get this working. The code below is work in progress and I am not sure what to do next,

import React from 'react';

class TradeTableView extends React.Component {

    constructor(){
        super() 
          this.state = {
            data: []
                  }

          this.handleClickEvent = this.handleClickEvent.bind(this);

    }

    handleClickEvent(event) {
        const name = event.target.name;
        console.log('Name in handleClickEvent is ' + name);
    }

    componentDidMount() {
        console.log('inside component did mount..');
        fetch('http://localhost:3004/row')
        .then(response => { 
            return response.json();})
        .then(responseData => {console.log(responseData); return responseData;})
        .then((data) => {
            // jsonItems = JSON.parse(items);
            this.setState({data: data});
          });
    }

    render() {
        return(
            <div className="Table">
                <div className="Heading">
                    <div className="Cell">
                        <p>Trade Date</p>
                    </div>
                    <div className="Cell">
                        <p>Commodity</p>
                    </div>
                    <div className="Cell">
                        <p>Side</p>
                    </div>
                    <div className="Cell">
                        <p>Quanity</p>
                    </div>
                    <div className="Cell">
                        <p>Price</p>
                    </div>
                    <div className="Cell">
                        <p>Counterparty</p>
                    </div>
                    <div className="Cell">
                        <p>Location</p>
                    </div>
                    <div className="Cell">
                        <p></p>
                    </div>
                </div>

                {this.state.data.map((item, key) => {
                    let prop1 = 'shouldHide'+key;
                    console.log('The prop is ' + prop1);

                    return (
                        <div ref={prop1} key={key} className="Row" onClick={this.handleClickEvent}>
                            <div className="Cell">
                                <p>{item.a}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.b}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.c}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.d}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.e}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.f}</p>
                            </div>
                            <div className="Cell">
                                <p>{item.f}</p>
                            </div>
                            <div className="Cell">
                                <p onClick={this.handleClickEvent}>{this.state.prop1 ? 'Sample Text':'Some Text'}</p>
                            </div>
                        </div>
                    )
                })}
            </div>
        );
    }
}

export default TradeTableView;

This is my component. If you can let me know how to toggle the text only for a particular row, I can most probably use that know how to toggle the button(my original use case) and then delete the row on click of the button. I will really appreciate your help.

P.S I was able to toggle the text.You may not find logic on thi.state.prop1 in my code above because I was trying to modify the code to make it work for a single row. And finally I got in a state where it is not working for all the rows and obviously not for a single row. To sum up, my problem is to identify the unique row and dislay a section only for that row.

Answer 1

I've added a currentSelectedRow property to state to keep track of the selected row. Below is the code with minimal configuration.

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

class TradeTableView extends React.Component {

  constructor() {
    super()
    this.state = {
      data: [{id:1,val:11},{id:2,val:22},{id:3,val:33}],
      currentSelectedRow : -1

    }
  }

  handleClickEvent = (event, key) =>{
    this.setState({ currentSelectedRow: key})
  }


  render() {
    return (
      <div className="Table">


        {this.state.data.map((item, key) => {
          return (
            <div key={key} className="Row" onClick={(e) => this.handleClickEvent(e, key)}>
              <div className="Cell">
                <p>{item.id}</p>
              </div>
              <div className="Cell">
                <p>{item.val}</p>
              </div>
              <div className="Cell">
               <p onClick={(e) => this.handleClickEvent(e, key)}>{this.state.currentSelectedRow === key ? 'Row Selected' : 'Row Not Selected'}</p>
              </div>
            </div>
          )
        })}
      </div>
    );
  }
}

render(<TradeTableView />, document.getElementById('root'));

Here is the working example

Answer 2

Change your handleClickevent like this:

 handleClickEvent(event, index) {
            const name = event.target.name;
            console.log("index is", index);
            const stateData = [...this.state.data];
            stateData[index]= "some new value"
            this.setState({
               data: stateData,
            })

            console.log('Name in handleClickEvent is ' + name);
        }

change how you are attaching click handler to

onClick={(event) => this.handleClickEvent(event, key)}

Something along these lines is needed as per my understanding of the question.