CODEWITHSUNDEEP
javascriptreactjsreduxgoogle-cloud-firestorematerial-ui
Filip
Filip

Reputation: 945

onClick gets fired immediately on component mount using firestore and React, redux

I've got a component, that displays a project. For each project, there is a delete button, but for some reason, the delete buttons of all my projects get "pressed" immediately. Why would this happen? I'm using redux and firestore. I think this has maybe something to do with the realtime listener, but don't have any problems with adding data to the database.

Projects.js

  componentDidMount = () => {
    this.props.projectActions.registerProjectListener();
  };

  renderProjects = () => {
    const { projects } = this.props.projects;
    const { classes, projectActions } = this.props;
    return (
      <Paper elevation={0} square={true} className={classes.projectPaper}>
        <Box fontSize="h5.fontSize" textAlign="center">
          Your Projects:
        </Box>
        {projects &&
          projects.map(project => {
            return <Project {...{ key: project.id, project, projectActions }}></Project>;
          })}
        <Grid container className={classes.grid} direction="row" justify="flex-end" alignItems="center">
          <AddProject {...{ projectActions }}></AddProject>
        </Grid>
      </Paper>
    );
  };

Project.js

export class Project extends Component {
  render() {
    const { classes, project, projectActions } = this.props;
    console.log(project.id);
    return (
      <Paper elevation={3} variant="outlined" className={classes.paper}>
        <Grid container justify="space-between">
          <Box fontSize="h6.fontSize">{project.name}</Box>
          <IconButton onClick={projectActions.deleteProject(project.id)}> //This gets fired immediately for every project
            <ClearIcon></ClearIcon>
          </IconButton>
        </Grid>
      </Paper>
    );
  }
}

actions

export const deleteProject = id => {
  return dispatch => {
    console.log(db.collection("projects").doc(id));
    // db.collection("projects")
    //   .doc(id)
    //   .delete();
    dispatch({ type: ActionTypes.DELETE_PROJECT });
  };
};

export const registerProjectListener = () => {
  let projects = [];
  return dispatch => {
    db.collection("projects").onSnapshot(snapshot => {
      snapshot.docChanges().forEach(change => {
        if (change.type === "added") {
          console.log(change.doc.data());
          projects.push({ ...change.doc.data(), ...{ id: change.doc.id } });
        } else if (change.type === "removed") {
          // projects.filter(()=> )
        }
      });
      dispatch({ type: ActionTypes.REGISTER_LISTENER, projects: projects });
    });
  };
};

Upvotes: 3

Views: 139

Answers (1)

Tps
Tps

Reputation: 194

You need to pass reference to a function. Update the IconButton component with the following.

<IconButton 
    onClick={() => projectActions.deleteProject(project.id)}>
    <ClearIcon></ClearIcon>
</IconButton>

Upvotes: 4

Related Questions