Get id from component to another

Question

I would like to take the id of the selected value from the list and put this ID in the second file to do the GET method again and get another list to this object, Below I add my file code, someone could help? I don't really understand the whole reactor yet, and I have to work with APi

1.jsx

function ConfirmationDialogRawDrawing(props) {
const {onClose, value: valueProp, open, ...other} = props;
const [value, setValue] = React.useState(valueProp);
const radioGroupRef = React.useRef(null);
const [products, setProducts] = React.useState([]);
const fetchProducts = async () => {
    const { data } = await axios.get(
        "/api/json/",
        {
            headers: {

                'Content-Type': 'application/json',
            }
        }
    );
    const products = data;
    setProducts(products);
    console.log(products);
};



React.useEffect(() => {
    fetchProducts();
    if (!open) {
        setValue(valueProp);

    }
}, [valueProp, open]);

const handleEntering = () => {
    if (radioGroupRef.current != null) {
        radioGroupRef.current.focus();
    }
};

const handleCancel = () => {
    onClose();
};

const handleOk = () => {
    onClose(value);
};

const handleChange = (event) => {
    setValue(event.target.value);
};

return (

    <Dialog
        disableBackdropClick
        disableEscapeKeyDown
        maxWidth="xs"
        onEntering={handleEntering}
        aria-labelledby="confirmation-dialog-title"
        open={open}
        {...other}
    >
        <DialogTitle id="confirmation-dialog-title">Drawing</DialogTitle>
        <DialogContent dividers>
            <RadioGroup
                ref={radioGroupRef}
                aria-label="ringtone"
                name="ringtone"
                value={value}
                onChange={handleChange}
            >
                {products.map((product) => (
                    <FormControlLabel value={product.name} key={product.id} control={<Radio/>}
                                      label={product.name}/>

                ))}

                
            </RadioGroup>
        </DialogContent>
        <DialogActions>
            <Button autoFocus onClick={handleCancel} color="primary">
                Cancel
            </Button>
            <Button onClick={handleOk} color="primary">
                Ok
            </Button>
        </DialogActions>
    </Dialog>
);
}

ConfirmationDialogRawDrawing.propTypes = {
    onClose: PropTypes.func.isRequired,
    open: PropTypes.bool.isRequired,
    value: PropTypes.string.isRequired,
};


export default function ConfirmationDialogDrawing() {
    const classes = useStyles();
    const [open, setOpen] = React.useState(false);
    const [value, setValue] = React.useState('');

    const handleClickListItem = () => {
        setOpen(true);
    };

    const handleClose = (newValue) => {
        setOpen(false);

        if (newValue) {
            setValue(newValue);
        }
    };

    return (
        <div className={classes.root}>
            <List component="div" role="list">
                
                <ListItem
                    button
                    divider

                    aria-controls="ringtone-menu"
                    aria-label=""
                    onClick={handleClickListItem}
                    role="listitem"
                >
                    <ListItemText primary="" secondary={value}/>
                </ListItem>


                <ConfirmationDialogRawDrawing
                    classes={{
                        paper: classes.paper,
                    }}
                    id="ringtone-menu"
                    keepMounted
                    open={open}
                    onClose={handleClose}
                    value={value}
                />
            </List>
        </div>
    );
}

and 2.jsx file want to looks like below

const [products, setProducts] = React.useState([]);
const fetchProducts = async () => {
    const { data } = await axios.get(
        "/api/json/`{id from 1.jsx}`",
        {
            headers: {

                'Content-Type': 'application/json',
            }
        }
    );
    const products = data;
    setProducts(products);
    console.log(products);
};

Answer 1

Since they are loaded at the same time, you can store the id in a shared state. There are many ways to do that: You can have the state directly in an ancestor component, use the Context API, use Redux or any other state management solution.