how to perform parent action from child in react-CodePudding

I have parent & its 2 child component

Parent code:

import React from 'react';
import { Grid, CircularProgress } from '@mui/material';
import { useSelector } from 'react-redux';

import Angle from './Angle/Angle';
import CustomSnackbar from '../Snackbar/CustomSnackbar';
import useStyles from './styles';

const Angles = ({ setCurrentId }) => {
const angles = useSelector((state) => state.angles);
const [snackbarOpenProp, setSnackbarOpenProp] = React.useState(false);
const classes = useStyles();

const handleSnackBarCloseAction = () => {
  setSnackbarOpenProp(false)
}

const handleAddToCartAction = () => {
  console.log('click');
  setSnackbarOpenProp(true)
}


  return (
    !angles.length ? <CircularProgress /> : (
      <Grid className={classes.container} container alignItems="stretch" spacing={3}>
        {angles.map((angle) => (
          <Grid key={angle._id} item xs={12} sm={6} md={6}>
            <Angle angle={angle} setCurrentId={setCurrentId} handleAddToCart={handleAddToCartAction}/>
          </Grid>
        ))}
        <CustomSnackbar openState={snackbarOpenProp} handleSnackBarCloseProp={handleSnackBarCloseAction}/>
      </Grid>
    )
  );
};

export default Angles;

Child 1 code:

import React from 'react';
import { Card, CardActions, CardContent, CardMedia, Button, Typography } from '@mui/material';
import Add from '@mui/icons-material/Add';

import { useDispatch } from 'react-redux';


import useStyles from './styles';

const Angle = ({ angle, setCurrentId,handleAddToCart }) => {
  const dispatch = useDispatch();
  const classes = useStyles();

  return (
    <Card className={classes.card}>
      <CardMedia className={classes.media} image={angle.image} />
      <div className={classes.overlay}>
        <Typography variant="h6">{angle.qualityName}</Typography>
        <Typography variant="body2">{angle.colors}</Typography>
      </div>
      <div className={classes.overlay2}>
        <Button onClick={handleAddToCart} style={{ color: 'white' }} size="small" onClick={() => setCurrentId(angle._id)}><Add fontSize="large" /></Button>
      </div>
    </Card>

  );
};

export default Angle;

Child 2 code:

import * as React from 'react';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';

export default function CustomSnackbar(props) {


  const action = (
    <React.Fragment>
      <Button color="secondary" size="small" onClick={props.handleSnackBarCloseProp}>
        UNDO
      </Button>
      <IconButton
        size="small"
        aria-label="close"
        color="inherit"
        onClick={props.handleSnackBarCloseProp}
      >
        <CloseIcon fontSize="small" />
      </IconButton>
    </React.Fragment>
  );

  return (
    <div>
      <Snackbar
        open={props.openState}
        autoHideDuration={6000}
        onClose={props.handleSnackBarCloseProp}
        message="Note archived"
        action={action}
      />
    </div>
  );
}

As you can see, I am trying to attach the onClick event which is in Child1 Angle code & based on its click I am trying to change a state value of another child2 CustomSnackbar and sending it as a prop, but on clicking I am not getting a response, How can I do it, also is there any more simple way to achieve this ?

CodePudding user response：

There are two onClick methods on the button component. Please change according below example and try it.

Before:

<Button onClick={handleAddToCart} style={{ color: 'white' }} size="small" onClick={() => setCurrentId(angle._id)}><Add fontSize="large" /></Button>

After:

<Button 
 style={{ color: 'white' }} 
 size="small" 
 onClick={() => { 
   handleAddToCart();
   setCurrentId(angle._id)
  }
 }>
  <Add fontSize="large" />
 </Button>