0

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 :) second file content displaying over first popover

Yashica Arora
  • 43
  • 5

2 Answers2

0

There is an issue in popover built-in libraries. I faced same issue so I create my own popOver.

<View
  style={{
    position: "relative",
    borderRadius: 10,
    marginLeft: 10,
    // marginTop: 10,
  }}
>
  <View
    style={{
      width: 250,
      borderRadius: 10,
      shadowColor: "grey",
      shadowOpacity: 3,
      shadowOffset: { width: 0, height: 5 },
      shadowRadius: 5,
      borderWidth: 0.5,
      backgroundColor: "white",
      borderColor: "grey",
    }}
  >
    <View style={{ padding: 10 }}>
      <View
        style={{
          margin: 10,
          // marginRight: 10,
          width: 150,
          flexDirection: "row",
          justifyContent: "space-between",
        }}
      >
        <Text style={{ fontSize: 18, width: 190 }}>Sample Text</Text>
        
          <Text
            style={{ color: "#0000FF" }}
          >1/2</Text>
        
      </View>

      <View
        style={{
          flexDirection: "row",
          justifyContent: "flex-end",
          width: 220,
        }}
      >
        
          <TouchableOpacity
            onPress={() => {
              
            }}
          >
            <Text
              style={{
                margin: 10,
                paddingHorizontal: 5,
                textDecorationLine: "underline",
                color: "#0000FF",
              }}
            >
              SKIP
            </Text>
          </TouchableOpacity>
        

        <TouchableOpacity
          onPress={() => {
            
          }}
          style={{
            backgroundColor: "#0000FF",
            borderRadius: 10,
          }}
        >
          <Text
            style={{
              margin: 10,
              paddingHorizontal: 5,
              
            }}
          >
            NEXT
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  </View>
  <View
    style={{
      width: 10,
      height: 10,

      borderTopWidth: 1,
      borderBottomWidth:  0,
      borderLeftWidth: 1,
      borderRightWidth:  0,
      borderColor: "grey",
      backgroundColor: "white",
      position: "absolute",
      top: -5,
      left: 90,
      transform: [{ rotate: "45deg" }],
    }}
  />
</View>
Safeer Ahmad
  • 11
  • 4
0

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! :)

Ramona
  • 16