Cᴀʟʟᴏᴅᴀᴄɪᴛʏ Cᴀʟʟᴏᴅᴀᴄɪᴛʏ - 2 months ago 19
React JSX Question

Update React component by key

I have a React app that has a tabbed interface of open files. The open files array looks like this:

[
{ name: 'file1', path: '/path/to/file1', fileContents: '...' },
{ name: 'file2', path: '/path/to/file2', fileContents: '...' },
{ ... }
]


Which are rendered into
<div>
's like so:

render() {
return this.state.files.map((file, i) => {
return <div key={`tab--${file.path}`}> ... </div>;
});
}


When my app renames the file, it re-renders the entire tab (since the
key
prop is now different due to the path update, React thinks it's a different component altogether and disposes of the previous element).

When rename "file2" to "file3", I would like my app to update the
key
from
tab--/path/to/file2
to
tab--/path/to/file3
without re-rendering the component at all - so just updating the
key
prop on the component.

Is there any way to find components by their
key
and subsequently update that
key
?

Answer

Keys shouldn't be used to access components. They're just used to let react keep track of the components within that scope. I'd just use i for your key (so that React doesn't lose track of the components) and use ref (<div key={i} ref={(f) => this[file.name] = f} />) to access the components themselves (via this[file.name]).

You'll probably need to do some cleanup with this[file.name] still pointing to objects when file.name has been changed to something else, but this will get you closer to what you need, I think.