Using API Values as props to change State in React

Question

I'm using API Values primaryKey to change data represented on Click, but the function doesnt seem to work. and No Errors are thrown. I'm unable to find whats going wrong here.

What I'm trying to do here is - By default the table outputs multiple stocks with multiple columns for each, when clicked on button it should use the key value of that stock to represent only that single stock with its columns. Here is my part of the code:

    handleClick = (props) => {
        return (
            <div>
                {this.state.data.filter(data => data.includes({props})).map(filteredData => (
                    <li>
                    {filteredData}
                    </li>
            ))};
            </div>
        );
    }
    renderArray = () => {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Price/ Chng</th>
                        <th>Mkt Cap</th>
                        <th>Volume</th>
                        <th>Turnover</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.data.map(item => {
                        return (
                            <tr key={item.co_S}>
                                <button onCLick={this.setState = () => this.handleClick(item.co_S)}><td >{item.co_N}</td></button>
                                <td>{item.price}</td>
                                <td>{item.p_chng_pc}</td>
                                <td>{item.Mkt_cap}</td>
                                <td>{item.volume}</td>
                                <td>{item.volume * item.price}</td>
                            </tr>
                        );
                    })};
                    
                </tbody>
            </table>
        );
    }
    render() {
        return (
            <this.renderArray />
        )
    }
}

export default StocksHomePage2;

Answer 1

 class App extends React.Component { state = { data: [ { co_S: 1, co_N: 1, price: 100, volume: 20, }, { co_N: 2, co_S: 2, price: 30, volume: 7, }, ], }; handleClick = (props) => { this.setState({ data: this.state.data.filter((item) => item.co_S === props), }); }; renderArray = () => { return ( <table className="table"> <thead> <tr> <th>Name</th> <th>Price</th> <th>Price/ Chng</th> <th>Mkt Cap</th> <th>Volume</th> <th>Turnover</th> </tr> </thead> <tbody> {this.state.data.map((item) => { return ( <tr key={item.co_S}> <button onClick={() => this.handleClick(item.co_S)}> <td>{item.co_N}</td> </button> <td>{item.price}</td> <td>{item.p_chng_pc}</td> <td>{item.Mkt_cap}</td> <td>{item.volume}</td> <td>{item.volume * item.price}</td> </tr> ); })} </tbody> </table> ); }; render() { return this.renderArray(); } } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>