How can I get a reference to an element in list using key?
up vote
2
down vote
favorite
A simple question which I can't find a good answer to.
I have a very large list of items (>1000, possibly greater than 10k). Each of these has a unique key. Is it possible to get a ref to an element by only knowing its key?
I can certainly generate refs myself, but this would require me maintaining a list of refs myself. In general, that is not a big deal, but due to the large list, it would probably be more efficient if there was a method for getting a ref just from the key.
reactjs
edited Nov 16 at 21:13
isherwood
36.3k1080111
asked Nov 16 at 21:10
bremen_matt
2,35621734
add a comment |
up vote
2
down vote
favorite
A simple question which I can't find a good answer to.
I have a very large list of items (>1000, possibly greater than 10k). Each of these has a unique key. Is it possible to get a ref to an element by only knowing its key?
I can certainly generate refs myself, but this would require me maintaining a list of refs myself. In general, that is not a big deal, but due to the large list, it would probably be more efficient if there was a method for getting a ref just from the key.
reactjs
edited Nov 16 at 21:13
isherwood
36.3k1080111
asked Nov 16 at 21:10
bremen_matt
2,35621734
1
What do you want to do with the DOM node once you have a reference to it? Thekeyprop is used by React internally and is never put on the DOM node, so I don't think you can use that, but you could put it in a data attribute and use that for querying if you really need to:<div key={someKey} data-key={somKey}> ... </div>
– Tholle
Nov 16 at 21:21
First and foremost, I want to change focus to a specific element.
– bremen_matt
Nov 16 at 21:25
Alright. Depending on your use case you might get away with something likedocument.querySelectorAll(`[data-key="${someKey}"]`).focus();
– Tholle
Nov 16 at 21:27
1
Nice. Post an answer and earn your reward. I can verify that this indeed works.
– bremen_matt
Nov 16 at 21:50
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
A simple question which I can't find a good answer to.
I have a very large list of items (>1000, possibly greater than 10k). Each of these has a unique key. Is it possible to get a ref to an element by only knowing its key?
I can certainly generate refs myself, but this would require me maintaining a list of refs myself. In general, that is not a big deal, but due to the large list, it would probably be more efficient if there was a method for getting a ref just from the key.
reactjs
edited Nov 16 at 21:13
isherwood
36.3k1080111
asked Nov 16 at 21:10
bremen_matt
2,35621734
A simple question which I can't find a good answer to.
I have a very large list of items (>1000, possibly greater than 10k). Each of these has a unique key. Is it possible to get a ref to an element by only knowing its key?
I can certainly generate refs myself, but this would require me maintaining a list of refs myself. In general, that is not a big deal, but due to the large list, it would probably be more efficient if there was a method for getting a ref just from the key.
reactjs
reactjs
edited Nov 16 at 21:13
isherwood
36.3k1080111
asked Nov 16 at 21:10
bremen_matt
2,35621734
edited Nov 16 at 21:13
isherwood
36.3k1080111
asked Nov 16 at 21:10
bremen_matt
2,35621734
edited Nov 16 at 21:13
isherwood
36.3k1080111
edited Nov 16 at 21:13
isherwood
36.3k1080111
edited Nov 16 at 21:13
isherwood
36.3k1080111
36.3k1080111
asked Nov 16 at 21:10
bremen_matt
2,35621734
asked Nov 16 at 21:10
bremen_matt
2,35621734
asked Nov 16 at 21:10
bremen_matt
2,35621734
2,35621734
1
What do you want to do with the DOM node once you have a reference to it? Thekeyprop is used by React internally and is never put on the DOM node, so I don't think you can use that, but you could put it in a data attribute and use that for querying if you really need to:<div key={someKey} data-key={somKey}> ... </div>
– Tholle
Nov 16 at 21:21
First and foremost, I want to change focus to a specific element.
– bremen_matt
Nov 16 at 21:25
Alright. Depending on your use case you might get away with something likedocument.querySelectorAll(`[data-key="${someKey}"]`).focus();
– Tholle
Nov 16 at 21:27
1
Nice. Post an answer and earn your reward. I can verify that this indeed works.
– bremen_matt
Nov 16 at 21:50
add a comment |
1
What do you want to do with the DOM node once you have a reference to it? Thekeyprop is used by React internally and is never put on the DOM node, so I don't think you can use that, but you could put it in a data attribute and use that for querying if you really need to:<div key={someKey} data-key={somKey}> ... </div>
– Tholle
Nov 16 at 21:21
First and foremost, I want to change focus to a specific element.
– bremen_matt
Nov 16 at 21:25
Alright. Depending on your use case you might get away with something likedocument.querySelectorAll(`[data-key="${someKey}"]`).focus();
– Tholle
Nov 16 at 21:27
1
Nice. Post an answer and earn your reward. I can verify that this indeed works.
– bremen_matt
Nov 16 at 21:50
1
1
What do you want to do with the DOM node once you have a reference to it? The
key prop is used by React internally and is never put on the DOM node, so I don't think you can use that, but you could put it in a data attribute and use that for querying if you really need to: <div key={someKey} data-key={somKey}> ... </div>– Tholle
Nov 16 at 21:21
What do you want to do with the DOM node once you have a reference to it? The
key prop is used by React internally and is never put on the DOM node, so I don't think you can use that, but you could put it in a data attribute and use that for querying if you really need to: <div key={someKey} data-key={somKey}> ... </div>– Tholle
Nov 16 at 21:21
First and foremost, I want to change focus to a specific element.
– bremen_matt
Nov 16 at 21:25
First and foremost, I want to change focus to a specific element.
– bremen_matt
Nov 16 at 21:25
Alright. Depending on your use case you might get away with something like
document.querySelectorAll(`[data-key="${someKey}"]`).focus();– Tholle
Nov 16 at 21:27
Alright. Depending on your use case you might get away with something like
document.querySelectorAll(`[data-key="${someKey}"]`).focus();– Tholle
Nov 16 at 21:27
1
1
Nice. Post an answer and earn your reward. I can verify that this indeed works.
– bremen_matt
Nov 16 at 21:50
Nice. Post an answer and earn your reward. I can verify that this indeed works.
– bremen_matt
Nov 16 at 21:50
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
The key prop is used by React internally and is never put on the DOM node so you can't use that for querying the DOM, but you could put it in a data attribute and use that for querying instead.
Example
class App extends React.Component {
state = {
items: ["foo", "bar", "baz"]
};
handleClick = event => {
const { key } = event.target.dataset;
document.querySelectorAll(`input[data-key="${key}"]`)[0].focus();
};
render() {
return (
<div>
{this.state.items.map(item => (
<div key={item}>
<input data-key={item} value={item} />
<button data-key={item} onClick={this.handleClick}>
Focus
</button>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>answered Nov 16 at 22:14
Tholle
32.7k53558
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
The key prop is used by React internally and is never put on the DOM node so you can't use that for querying the DOM, but you could put it in a data attribute and use that for querying instead.
Example
class App extends React.Component {
state = {
items: ["foo", "bar", "baz"]
};
handleClick = event => {
const { key } = event.target.dataset;
document.querySelectorAll(`input[data-key="${key}"]`)[0].focus();
};
render() {
return (
<div>
{this.state.items.map(item => (
<div key={item}>
<input data-key={item} value={item} />
<button data-key={item} onClick={this.handleClick}>
Focus
</button>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>answered Nov 16 at 22:14
Tholle
32.7k53558
add a comment |
up vote
2
down vote
accepted
The key prop is used by React internally and is never put on the DOM node so you can't use that for querying the DOM, but you could put it in a data attribute and use that for querying instead.
Example
class App extends React.Component {
state = {
items: ["foo", "bar", "baz"]
};
handleClick = event => {
const { key } = event.target.dataset;
document.querySelectorAll(`input[data-key="${key}"]`)[0].focus();
};
render() {
return (
<div>
{this.state.items.map(item => (
<div key={item}>
<input data-key={item} value={item} />
<button data-key={item} onClick={this.handleClick}>
Focus
</button>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>answered Nov 16 at 22:14
Tholle
32.7k53558
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
The key prop is used by React internally and is never put on the DOM node so you can't use that for querying the DOM, but you could put it in a data attribute and use that for querying instead.
Example
class App extends React.Component {
state = {
items: ["foo", "bar", "baz"]
};
handleClick = event => {
const { key } = event.target.dataset;
document.querySelectorAll(`input[data-key="${key}"]`)[0].focus();
};
render() {
return (
<div>
{this.state.items.map(item => (
<div key={item}>
<input data-key={item} value={item} />
<button data-key={item} onClick={this.handleClick}>
Focus
</button>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>answered Nov 16 at 22:14
Tholle
32.7k53558
The key prop is used by React internally and is never put on the DOM node so you can't use that for querying the DOM, but you could put it in a data attribute and use that for querying instead.
Example
class App extends React.Component {
state = {
items: ["foo", "bar", "baz"]
};
handleClick = event => {
const { key } = event.target.dataset;
document.querySelectorAll(`input[data-key="${key}"]`)[0].focus();
};
render() {
return (
<div>
{this.state.items.map(item => (
<div key={item}>
<input data-key={item} value={item} />
<button data-key={item} onClick={this.handleClick}>
Focus
</button>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>class App extends React.Component {
state = {
items: ["foo", "bar", "baz"]
};
handleClick = event => {
const { key } = event.target.dataset;
document.querySelectorAll(`input[data-key="${key}"]`)[0].focus();
};
render() {
return (
<div>
{this.state.items.map(item => (
<div key={item}>
<input data-key={item} value={item} />
<button data-key={item} onClick={this.handleClick}>
Focus
</button>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>class App extends React.Component {
state = {
items: ["foo", "bar", "baz"]
};
handleClick = event => {
const { key } = event.target.dataset;
document.querySelectorAll(`input[data-key="${key}"]`)[0].focus();
};
render() {
return (
<div>
{this.state.items.map(item => (
<div key={item}>
<input data-key={item} value={item} />
<button data-key={item} onClick={this.handleClick}>
Focus
</button>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>answered Nov 16 at 22:14
Tholle
32.7k53558
answered Nov 16 at 22:14
Tholle
32.7k53558
answered Nov 16 at 22:14
Tholle
32.7k53558
answered Nov 16 at 22:14
Tholle
32.7k53558
32.7k53558
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53345417%2fhow-can-i-get-a-reference-to-an-element-in-list-using-key%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
What do you want to do with the DOM node once you have a reference to it? The
keyprop is used by React internally and is never put on the DOM node, so I don't think you can use that, but you could put it in a data attribute and use that for querying if you really need to:<div key={someKey} data-key={somKey}> ... </div>– Tholle
Nov 16 at 21:21
First and foremost, I want to change focus to a specific element.
– bremen_matt
Nov 16 at 21:25
Alright. Depending on your use case you might get away with something like
document.querySelectorAll(`[data-key="${someKey}"]`).focus();– Tholle
Nov 16 at 21:27
1
Nice. Post an answer and earn your reward. I can verify that this indeed works.
– bremen_matt
Nov 16 at 21:50