使用 react redux 和 firebase 按值过滤表

Question

I am trying to filter a table in a react component by a value inside a document in firebase.

The important code looks like this. Claims is being parsed into another component for the table rows.

class Claims extends Component {
  componentDidMount() {
    this.props.getClaims();
  }
  render() {
    const { Claims, loading } = this.props.data;
    let recentClaimsMarkup = !loading ? (
      Claims.map(Claim => <ClaimsTable Claim={Claim} />)
    ) : (
      <p>Loading...</p>
    );
    return (
      <Grid>
        <Paper className = {mergeClasses.root}>
          <Typography> {this.props.match.params.Project} Claim's</Typography>{" "}
        </Paper>
        <Paper className={mergeClasses.root}>
          <Table className={mergeClasses.table} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>Claim ID</TableCell>
                <TableCell align="right">Date received</TableCell>
                <TableCell align="right">Progress</TableCell>
                <TableCell>Edit Claim</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>{recentClaimsMarkup}</TableBody>
          </Table>
        </Paper>

I am wanting to filter it by the url Project, shown below

{this.props.match.params.Project}

This is due to the claims being tied to the project name.

If this was in Python I would just use a for loop or something similar, but a little bit confused how to filter what Claims are able to be mapped.

Basically want it to be, for claims with Project == {this.props.match.params.Project}: map claims.

Appreciate any help :)

Thanks

Answer 1

So basically filter also returns a new copy of array and you can read more here , but the problem is you can't create the jsx element, if you want to know more you can read this question

so in your case you need to first filter and then you need to render the jsx element using map like shown below

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";

import "./styles.css";

const User = props => {
  const claimsUserHasAccess = props.data.claims.filter(
    claim => claim.project === props.match.params.access
  );
  return (
    <>
      {claimsUserHasAccess.map(claim => (
        <p key={claim.name}>{claim.name}</p>
      ))}
    </>
  );
};

const userData = {
  claims: [
    { project: "enabled", name: "job" },
    { project: "enabled", name: "nick" },
    { project: "disabled", name: "jef" }
  ]
};

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route
          path="/user/:access"
          render={props => <User data={userData} {...props} />}
        />
      </BrowserRouter>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

in the url you need to enter enabled or disabled to see the users. I hope this will give a better view of your problem.

working codesandbox