Filtering elements from table onClick using react

Question

I have a table with dynamic data being displayed on it if the user click any of the table rows a modal pops up and shows some more details about the row clicked, on the modal the user has two options, one to see the full details which redirects him to a page with the full details of the row clicked and the other to hide the row.

I tried using the filter method on the data fetched from the API but I wasn't successful how will I go along about implementing this functionality.Any help would be very much appreciated.

Here is the code i used :

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import BootStrapTable from "react-bootstrap-table-next"
import paginationFactory from 'react-bootstrap-table2-paginator';
import {Modal , Button} from "react-bootstrap"
import { useHistory } from "react-router-dom";
import Footer from "./Footer"

export default function DataTable (){
    const history = useHistory();
    const [companies,setCompanies] = useState([]);
    const [modalInfo,setModalInfo] = useState([]);
    // eslint-disable-next-line
    const [showModal,setShowModal] = useState(false);
    const [show ,setShow] = useState(false);
    const handleCLose = () => setShow(false)
    const handleShow = () => setShow(true)
    const getCompaniesData = async () =>{
        try{
            const data = await axios.get("http://localhost:5000/companies")
            setCompanies(data.data)
        }
        catch(e){
            console.log(e)
        }
    }
    useEffect(()=>{
        getCompaniesData();
    },[])
    const columns = [
        {dataField:"id",text:"id"},
        {dataField:"name",text:"name"},
     
    ]
    const rowEvents = {
        onClick : (e,row)=>{
            console.log(row)
            setModalInfo(row)
            toggleTrueFalse()
            
        }
    }
    const toggleTrueFalse = () =>{
        setShowModal(handleShow);
    }
    const handleDetails = () =>{
        history.replace('/details', {details:modalInfo})
    }

 function handleHide (mid) {
    return companies.filter((item) => {
      return item.id === mid;
    });
  };

    const ModalContent = () =>{
     return (   <Modal show={show} onHide={handleCLose}>
<Modal.Header closeButton>
    <Modal.Title>
        
  {modalInfo.name}
    </Modal.Title>
</Modal.Header>
<Modal.Body>
<h1 >Company Details :</h1>
<ul>
     <ol>source_id : {modalInfo.source_id}</ol>
     <ol>source_name : {modalInfo.source_name}</ol>
     <ol>name : {modalInfo.name}</ol>
     <ol>city : {modalInfo.city}</ol>
     <ol>country : {modalInfo.country}</ol>
</ul>
</Modal.Body>
<Modal.Footer>

    <Button variant="secondary" onClick={handleDetails}>Full Details</Button>
    <Button className="btn btn-danger" variant="secondary" onClick={handleHide(modalInfo.id)}>Hide Element</Button>
</Modal.Footer>
        </Modal> )
    }
    return (
        <div>
        <h1 className="text-center">Share-work Data Table</h1>
        <div className="table-back">
        <BootStrapTable
        keyField="id"
        data={companies}
        columns={columns}
        pagination={paginationFactory()}
        rowEvents = {rowEvents}
        />
          <Footer/>
        </div>
       
        {show ? <ModalContent/> : null}
      
        </div>
    )
}

Tim Gerhard · Accepted Answer · 2020-10-19 14:26:32Z

1

You need to actually update the state.

Instead of this:

 function handleHide (mid) {
    return companies.filter((item) => {
      return item.id === mid;
    });
  };

update the state with the setCompanies function you defined above (const [companies,setCompanies] = useState([]);)

This is what you code should look like instead:

 function handleHide (mid) {
    setCompanies(companies.filter((item) => {
      return item.id === mid;
    }));
  };

answered Oct 19, 2020 at 14:26

Tim Gerhard

3,6272 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Max Over a year ago

Hey TIm , thank you for your answer cant believe i missed that, how ever i still have a problem now everytime i click on i field i think the function gets called immediately and the modal doesn't get a chance to open first for some reason

Max Over a year ago

is there a way to pass the parameter without invoking the function right away?

Tim Gerhard Over a year ago

no worries, that's completely fine, everybody makes mistakes.

Tim Gerhard Over a year ago

yes, there is a way. use this: onClick={() => handleHide(modalInfo.id)} instead of this: onClick={handleHide(modalInfo.id)}

Collectives™ on Stack Overflow

Filtering elements from table onClick using react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related