How to handle multiple popovers dynamically and bind content of popover in react?

Question

I am a newbie in react and need your help in binding content of popover with particular popover when there are multiple popovers on screen.

I tried searching solution over internet and got help from these links but couldnt achieve working solution. how to handle multiple popover (material ui)

React map always calls method with data of last element

This is my code :

I have filename and its content in array and this is how it looks:

fileContent=[{fileName: 'abc', fileContent:'Hey There!!'},{fileName: 'xyz', fileContent:'Hello World'},]

This is how i am rendering html :

  <Typography style={{ fontWeight: 500 }}>
                                                                           
                                            {fileContent.map((file, index)=>(
    
                                            <div>
                                                            <IconButton aria-label='article' aria-describedby={id} variant="contained" 
                                                            onClick={handleViewerClick}
                                                            >
                                                                <DescriptionIcon />
                                                            </IconButton>
                                                            <Popover
                                                                id={index}
                                                                open={open}
                                                                anchorEl={anchorEl}
                                                                onClose={handleViewerClose}
                                                                anchorOrigin={{
                                                                    vertical: 'bottom',
                                                                    horizontal: 'left',
                                                                }}
                                                            >
                                                            <div style={{ 'white-space': 'pre-line' }}>{file.fileContent}</div>
                                                            </Popover>
    
                                                            {file.fileName}
    
                                            </div>
                                            
                                        )
                                        )}
                                    </Typography>

        const [anchorEl, setAnchorEl] = useState(null);
    
      const handleViewerClick = (event) => {
            setAnchorEl(event.currentTarget);
        };
    
        const handleViewerClose = () => {
            setAnchorEl(null);
        };
    
        const open = Boolean(anchorEl);
        const id = open ? 'simple-popover' : undefined;

When i click on article icon shown in front of first file, code shows content of second file as everytime Iconbutton onClick gets triggered the whole loop runs and content gets replaced with last index.

Can anyone please help me how i can achieve this.

Really seeking help on this :)

Answer 1

If you are mapping through a small number of elements, you can set a different anchorEl for each Popover.

If fileContent length is big, you can set the index in a state in handleViewerClick function. Every time the function is called, the state will be updated with the correspondant index and the content of fileContent[_state_] can be called correctly.

Hope this help! :)