Problem

Store.js

import React, { createContext, useState } from 'react';
import store from "../../Config/Store";
import fire from "../../Config/Fire";

export const QueryContext = createContext(0);
export const RowContext = createContext(0);
export const DataContext = createContext(0);

fire.auth().onAuthStateChanged(function (user) {
    if (user) {
        // User is signed in.
    } else {
        // No user is signed in.
    }
});


const Store = ({ children }) => {
    const data = (stream, sem) => {
        function createData(Id, roll, name, stream, semister, uID) {
            return { Id, roll, name, stream, semister, uID };
        }

        var rows = [];
        let Id = 0;

        store
            .collection("students")
            .orderBy("Roll")
            .where("Stream", "==", stream)
            .where("Semister", "==", sem)
            .onSnapshot(snapshot => {
                snapshot.docChanges().forEach(change => {
                    if (change.type === "added") {
                        var doc = change.doc;
                        console.log(Id, ">", doc.data().Name);
                        rows.push(
                            createData(
                                Id,
                                doc.data().Roll,
                                doc.data().Name,
                                doc.data().Stream,
                                doc.data().Semister,
                                doc.id
                            )
                        );
                        Id++;
                    } else if (change.type === "removed") {
                        console.log("Item Removed");
                    }
                });
            });
        return rows;
    }


    const [query, setQuery] = useState({
        Stream: 'BCA',
        Sem: '5th'
    });
    const [rows, setRows] = useState(data(query.Stream, query.Sem));

    console.log(query);
    console.log(rows);

    // if (query.Stream !== 'BCA' || query.Sem !== '5th') {
    //     console.log(rows[0].stream + "~" + rows[0].semister);
    //     if (rows[0].stream !== query.Stream || rows[0].semister !== query.Sem) {
    //         setRows(data(query.Stream, query.Sem));
    //     }
    // }

    return (
        <QueryContext.Provider value={[query, setQuery]}>
            <RowContext.Provider value={[rows, setRows]}>
                <DataContext.Provider value={data}>
                    {children}
                </DataContext.Provider>
            </RowContext.Provider>
        </QueryContext.Provider>
    );
};

export default Store;

Students.js

import React, {
  useState,
  useContext,
} from "react";
import {
  Grid,
  Paper,
  Table,
  Select,
  MenuItem,
  TableRow,
  TableBody,
  TableCell,
  TableHead,
  Container,
  FormControl,
  FormHelperText,
} from '@material-ui/core';
import Store from "./Store";
import Title from './Title';
import {
  KeyboardDatePicker,
  MuiPickersUtilsProvider
} from '@material-ui/pickers';
// import func from "../../Config/Func";
import DateFnsUtils from '@date-io/date-fns';
import SearchIcon from '@material-ui/icons/Search';
import InputBase from '@material-ui/core/InputBase';
import IconButton from '@material-ui/core/IconButton';
import { makeStyles } from "@material-ui/core/styles";

import { QueryContext, RowContext, DataContext } from "./Store";


const useStyles = makeStyles(theme => ({
  content: {
    flexGrow: 1,
  },
  container: {
    paddingBottom: theme.spacing(4)
  },
  paper: {
    padding: theme.spacing(3),
    paddingBottom: theme.spacing(6)
  },
  // Selector
  content1: {
    flexGrow: 1,
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(3),
  },
  container1: {
    paddingTop: theme.spacing(12)
  },
  paper1: {
    padding: theme.spacing(3),
    paddingTop: theme.spacing(0),
    paddingBottom: theme.spacing(1)
  },
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
  datePicker: {
    paddingTop: theme.spacing(3)
  },
  // Search
  root2: {
    flexGrow: 1,
    display: 'flex',
    padding: '2px 4px',
    alignItems: 'center',
    marginTop: theme.spacing(0),
    marginBottom: theme.spacing(3),
    marginLeft: theme.spacing(4),
    marginRight: theme.spacing(4)
  },
  input: {
    marginLeft: theme.spacing(3),
    flex: 1,
  },
  iconButton: {
    padding: 10,
  },
  divider: {
    margin: 4,
    height: 28,
  },
  // List
  container3: {
    paddingBottom: theme.spacing(4)
  },
  paper3: {
    padding: theme.spacing(3),
    paddingBottom: theme.spacing(6)
  }
}));

const Students = () => (
  <React.Fragment>
    <Store>
      <Wrap />
    </Store>
  </React.Fragment>
);

const Wrap = () => {
  const classes = useStyles();
  // eslint-disable-next-line
  return (
    <React.Fragment>
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <StudentSelector />
        <StudentSearch />
        <StudentList />
      </main>
    </React.Fragment>
  );
}


const StudentSelector = () => {
  const classes = useStyles();
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [query, setQuery] = useContext(QueryContext);
  const [, setRows] = useContext(RowContext);
  const data = useContext(DataContext);

  const handleDateChange = date => {
    setSelectedDate(date);
  };

  const handleChange = event => {
    setQuery(oldValues => ({
      ...oldValues,
      [event.target.name]: event.target.value,
    }));
    setRows(data(query.Stream, query.Sem))
  };

  console.log(query);

  return (
    <main className={classes.content1}>
      <div className={classes.appBarSpacer} />
      <Container maxWidth="lg" className={classes.container1}>
        <Paper className={classes.paper1}>
          <Grid container spacing={3}>
            <Grid item xs={12}>
              <form className={classes.root} autoComplete="off">
                <FormControl className={classes.formControl}>
                  <Select
                    value={query.Stream}
                    onChange={handleChange}
                    displayEmpty
                    name="Stream"
                    className={classes.selectEmpty}
                  >
                    <MenuItem value={'BBA'}>BBA</MenuItem>
                    <MenuItem value={'BCA'}>BCA</MenuItem>
                  </Select>
                  <FormHelperText>Select Stream</FormHelperText>
                </FormControl>

                <FormControl className={classes.formControl}>
                  <Select
                    value={query.Sem}
                    onChange={handleChange}
                    displayEmpty
                    name="Sem"
                    className={classes.selectEmpty}
                  >
                    <MenuItem value={'1st'}>1'st Sem</MenuItem>
                    <MenuItem value={'2nd'}>2'nd Sem</MenuItem>
                    <MenuItem value={'3rd'}>3'rd Sem</MenuItem>
                    <MenuItem value={'4th'}>4'th Sem</MenuItem>
                    <MenuItem value={'5th'}>5'th Sem</MenuItem>
                    <MenuItem value={'6th'}>6'th Sem</MenuItem>
                  </Select>
                  <FormHelperText>Select Semister</FormHelperText>
                </FormControl>

                <MuiPickersUtilsProvider kersUtilsProvider utils={DateFnsUtils}>
                  <KeyboardDatePicker
                    label=""
                    margin="none"
                    format="MM/dd/yyyy"
                    value={selectedDate}
                    id="date-picker-dialog"
                    animateYearScrolling="true"
                    onChange={handleDateChange}
                    className={classes.datePicker}
                    KeyboardButtonProps={{
                      'aria-label': 'change date',
                    }}
                  />
                </MuiPickersUtilsProvider>
              </form>
            </Grid>
          </Grid>
        </Paper>
      </Container>
    </main>
  );
}

const StudentSearch = () => {
  const classes = useStyles();

  return (
    <Paper className={classes.root2}>
      <InputBase
        className={classes.input}
        placeholder="Search For students"
        inputProps={{ 'aria-label': 'search google maps' }}
      />
      <IconButton className={classes.iconButton} aria-label="search">
        <SearchIcon />
      </IconButton>
    </Paper>
  );
}


// function useForceUpdate() {
//   let [value, setState] = useState(true);
//   return () => setState(!value);
// }


const StudentList = () => {
  const classes = useStyles();
  const [query,] = useContext(QueryContext);
  const [rows,] = useContext(RowContext);
  console.log(query);
  console.log(rows);
  const handleClick = () => {
    console.log("open dialog");
    // setOpen(true);
    console.log(query);
    console.log(rows);
    // useForceUpdate();
  };

  return (
    <React.Fragment>
      <Container maxWidth="lg" className={classes.container3}>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Paper className={classes.paper3}>
              <Title>Students</Title>
              <Table size="small">
                <TableHead>
                  <TableRow onClick={event => handleClick()}>
                    <TableCell>Roll</TableCell>
                    <TableCell>Name</TableCell>
                    <TableCell>Class</TableCell>
                    <TableCell>Semister</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {rows.map(row => (
                    <TableRow
                      key={row.uID}
                      hover
                      role="checkbox"
                      onClick={event => handleClick()}
                    >
                      <TableCell>{row.roll}</TableCell>
                      <TableCell>{row.name}</TableCell>
                      <TableCell>{row.stream}</TableCell>
                      <TableCell>{row.semister}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </React.Fragment>
  )
}

export default Students;