reac table i dont put saerch please can you help me

[coskunsahin]

import React, { useMemo, useState, useEffect } from "react";

import axios from 'axios';
import Table from "./Table";
import styled from 'styled-components'

const Styles = styled.div `
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color:#000000;
color: white;

:last-child {
  border-right: 0;

}
}

.pagination {
  padding: 0.5rem;

}
`

const Genres = ({ values }) => {
// Loop through the array and create a badge-like component instead of comma-separated string

return (
<>
{values.map((genre, idx) => {
return (

{genre}

);
})}
</>
);
};
const ReactTable = window.ReactTable.default

function App() {

const [data, setData] = useState([]);

// Using useEffect to call the API once mounted and set the data
useEffect(() => {
(async () => {
const result = await axios("https://api.tvmaze.com/search/shows?q=snow");
setData(result.data);
search: ''
})();
}, []);

const columns = useMemo(
() => [
{
// first group - TV Show
Header: "TV Show",
// First group columns
columns: [
{
Header: "Name",
accessor: "show.name",
filter: 'fuzzyText',
},
{
Header: "Type",
accessor: "show.type"
},
{

        Header: "Details",
    columns: [
      {
        Header: "Language",
        accessor: "show.language"
      },
     
     
     
     
      {
        Header: "Genre(s)",
        accessor: "show.genres",
        // Cell method will provide the cell value, we pass it to render a custom component
        Cell: ({ cell: { value } }) => <Genres values={value} />
      },
     
     
     
     
     
      {
        Header: "Runtime",
        accessor: "show.runtime",
        // Cell method will provide the value of the cell, we can create custom element for the Cell        
        Cell: ({ cell: { value } }) => {
          const hour = Math.floor(value / 60);
          const min = Math.floor(value % 60);
          return (
            <>
              {hour > 0 ? `${hour} hr${hour > 1 ? "s" : ""} ` : ""}
              {min > 0 ? `${min} min${min > 1 ? "s" : ""}` : ""}
            </>
          );
        }
      },
     
     
     
     
     
      {
        Header: "Status",
        accessor: "show.status"
      }
    ]
  },
 
      
    ]

    
  }
],


[]

);
return(){
let data = this.state.data
if (this.state.search) {
data = data.filter(row => {
return row.firstName.includes(this.state.search) || row.lastName.includes(this.state.search) || String(row.age).includes(this.state.search)
})
}
}

return (

<div style={{'border':'1px solid rgba(0, 0, 0, 0.05)'}}className="App">
<input value={this.state.search}
onChange={e => this.setState({search: e.target.value})}
/>

);
}

export default App;

/// table

import React from "react";
import { useTable, useSortBy } from 'react-table'

export default function Table({ columns, data }) {
// Use the useTable Hook to send the columns and data to build the table
const {
getTableProps, // table props from react-table
getTableBodyProps, // table body props from react-table
headerGroups, // headerGroups if your table have groupings
rows, // rows for the table based on the data passed
prepareRow // Prepare the row (this function need to called for each row before getting the row props)
} = useTable(
{
columns,
data,
},
useSortBy
)

/*
Render the UI for your table
- react-table doesn't have UI, it's headless. We just need to put the react-table props from the Hooks, and it will do its magic automatically
*/
return (
<table hover{...getTableProps()}>

{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (

{column.render('Header')} {/* Add a sort direction indicator */} {column.isSorted ? column.isSortedDesc ? ' 🔽' : ' 🔼' : ''}

        ))}
      </tr>
    ))}
  </thead>
  <tbody {...getTableBodyProps()}>
    {rows.map((row, i) => {
      prepareRow(row);
      return (
        <tr {...row.getRowProps()}>
          {row.cells.map(cell => {
            return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
          })}
        </tr>
      );
    })}
  </tbody>
</table>

);
}