Add dataKey property to DataView

[oliverswitzer]

I'm submitting a ... (check one with "x")

[X] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Current behavior
The DataView component has no way of specifying a custom key prop for the passed in itemTemplate component. This is problematic because, in my use case, each instance of itemTemplate has a modal within it that displays data passed in via DataViews value prop.

Here's a simplified illustration

render() {
    value = [{id: 1, text: 'some text'}, {id:2, text: 'some other text'}]
    itemTemplate = ({ text }) => <Dialog>{text}<Dialog>

    return (
         <DataView value={value} itemTemplate={itemTemplate}/>
     )
} 

When the data set passed to the value prop changes while a user has a modal open, the information displayed in the modal unexpectedly changes. This is because the key for the currently displayed itemTemplate is based on index only (see here, in the source code for DataView)

If I had the ability to override this key to be the identifier of my data rather than the index of the template that the DataView component is iterating over, then React would be smart enough to know that it should not change what is displayed in the modal.

Minimal reproduction of the problem with instructions

1. Put a modal within a component that will be rendered multiple times as a `itemTemplate=
2. Pass that component to DataView as the itemTemplate prop
3. Open a modal for one of the itemTemplates that are rendered by the DataView
4. Update the value prop of DataView to add on additional array item
5. Note that the modal now displays the next itemTemplates information, since the value array has changed length by one.

I would expect the modal to not change.

• React version:
  16.8.6

• PrimeReact version:
  3.1.8

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  All

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Typescript

[master117]

Whether a Dialog is open is based on the visible property, as you surely know. So when you say that the dialog changes I assume you are changing the visible properties of some dialogues. Hiding one and showing another. Your code snippet sadly doesn't show how you set that visible state. But I assume it's something like:

render() {
    value = [{id: 1, text: 'some text'}, {id:2, text: 'some other text'}]
    itemTemplate = ({ data }) => <Dialog 
        visible={data.index === someIndex}>
        {data.field.text}
    <Dialog>

    return (
         <DataView value={value} itemTemplate={itemTemplate}/>
     )
} 

Without further information how you trigger your Dialogues I find it really hard to understand what you are talking about.

[oliverswitzer]

Let's imagine there's a button rendered within each itemTemplate that opens the modal:

itemTemplate = ({ data }) => {
   const [openDialog, setOpenDialog] = useState(false)

   return (
      <>
         <button onClick={() => setOpenDialog(true)} />
         <Dialog visible={openDialog}>
             {data.field.text}
         </Dialog>
      </>
   )
}

[master117]

Trying to recreate your Bug I'm stuck on this: https://i.imgur.com/LOUinEv.png

Here is a sandbox of it: https://codesandbox.io/s/primereact-test-ceehk?fontsize=14&hidenavigation=1&theme=dark

Could you provide a working sandbox of your problem?

[mertsincan]

Hi,

I added dataKey property for it. You can use <DataView dataKey="id" .../>.

Best Regards,