text: /*import React from 'react';
  import axios from 'axios';
  import { render } from '@testing-library/react';
  
  export default class CodeList extends React.Component {
      state = {
          persons : [],
      };
  
      componentDidMount(){
          axios.get('http://127.0.0.1:5000/codesnippet/Java').then(res=> {
              console.log(res);
              this.setState({persons: res.data});
          });
      }
  
  
      render(){
          return this.state.persons.map(person => <li>{person.index}</li>);
      }
  }*/
  
  import axios from "axios";
  import { useEffect, useState } from "react";
  import { withStyles, makeStyles } from "@material-ui/core/styles";
  import Table from "@material-ui/core/Table";
  import TableBody from "@material-ui/core/TableBody";
  import TableCell from "@material-ui/core/TableCell";
  import TableContainer from "@material-ui/core/TableContainer";
  import TableHead from "@material-ui/core/TableHead";
  import TableRow from "@material-ui/core/TableRow";
  import Paper from "@material-ui/core/Paper";
  import {Link} from 'react-router-dom';
  
  const StyledTableCell = withStyles((theme) => ({
    head: {
      backgroundColor: '#3699cf',
      color: theme.palette.common.white,
    },
    body: {
      fontSize: 14,
    },
  }))(TableCell);
  
  const StyledTableRow = withStyles((theme) => ({
    root: {
      "&:nth-of-type(odd)": {
        backgroundColor: theme.palette.action.hover,
      },
    },
  }))(TableRow);
  
  const useStyles = makeStyles({
    table: {
      minWidth: 700,
    },
  });
  
  const CodeListJava = () => {
    const classes = useStyles();
    const [product, setProduct] = useState([]);
    const [search, setSearch] = useState("");
  
    const getProductData = async () => {
      try {
        const data = await axios.get(
          "https://code-per-minute.herokuapp.com/codesnippet/Java"
        );
        console.log(data.data);
        setProduct(data.data);
      } catch (e) {
        console.log(e);
      }
    };
  
    useEffect(() => {
      getProductData();
    }, []);
    return (
      <div className="App">
        <h1>Java</h1>
        <input
          type="text"
          placeholder="Search here"
          onChange={(e) => {
            setSearch(e.target.value);
          }}
        />
  
        {/* {product
          .filter((item) => {
            if (search == "") {
              return item;
            } else if (item.name.toLowerCase().includes(search.toLowerCase())) {
              return item;
            }
          })
          .map((item) => {
            return (
              <p>
                {item.name} - {item.price}
              </p>
            );
          })} */}
  
        <TableContainer component={Paper}>
          <Table className={classes.table} aria-label="customized table">
            <TableHead>
              <TableRow>
                <StyledTableCell align="center">Problem Name</StyledTableCell>
                <StyledTableCell align="center">Problem Index</StyledTableCell>
                <StyledTableCell align="center">Skill</StyledTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {product
                .filter((item) => {
                  if (search === "") {
                    return item;
                  } else if (
                    item.name.toLowerCase().includes(search.toLowerCase())
                  ) {
                    return item;
                  }
                })
                .map((item, index) => {
                  return (
                    <StyledTableRow key={item.name}>
                      <StyledTableCell align="center">
                        <Link to={`/Java/${item._id}`}>{item.name}</Link>
                      </StyledTableCell>
                      <StyledTableCell align="center" component="th" scope="row">
                        {item.difficulty}
                      </StyledTableCell>
                      <StyledTableCell align="center" component="th" scope="row">
                        {item.skillcategory}
                      </StyledTableCell>
                    </StyledTableRow>
                  );
                })}
            </TableBody>
          </Table>
        </TableContainer>
      </div>
    );
  };
  
  export default CodeListJava;