React.js Autocomplete from scratch
up vote
-1
down vote
favorite
As part of a technical test, I've been asked to write an autocomplete input in React. I've done this but I'd now like to add the functionality of navigating up and down the rendered list with the arrow keys. I've done some extensive Googling and found nothing React specific apart from npm packages.
To be clear, I'm looking for something like this but for React: https://www.w3schools.com/howto/howto_js_autocomplete.asp
All I basically need is the arrow button functionality, I've got everything else working fine.
Cheers
Here's an example that I tried but couldn't get working.
export default class Example extends Component {
constructor(props) {
super(props)
this.handleKeyDown = this.handleKeyDown.bind(this)
this.state = {
cursor: 0,
result:
}
}
handleKeyDown(e) {
const { cursor, result } = this.state
// arrow up/down button should select next/previous list element
if (e.keyCode === 38 && cursor > 0) {
this.setState( prevState => ({
cursor: prevState.cursor - 1
}))
} else if (e.keyCode === 40 && cursor < result.length - 1) {
this.setState( prevState => ({
cursor: prevState.cursor + 1
}))
}
}
render() {
const { cursor } = this.state
return (
<Container>
<Input onKeyDown={ this.handleKeyDown }/>
<List>
{
result.map((item, i) => (
<List.Item
key={ item._id }
className={cursor === i ? 'active' : null}
>
<span>{ item.title }</span>
</List.Item>
))
}
</List>
</Container>
)
}
}
And here is my code:
class Search extends Component {
constructor(props) {
super(props);
this.state = {
location: '',
searchName: '',
showSearch: false,
cursor: 0
};
}
handleKeyPress = e => {
const { cursor, searchName } = this.state;
// arrow up/down button should select next/previous list element
if (e.keyCode === 38 && cursor > 0) {
this.setState(prevState => ({
cursor: prevState.cursor - 1
}));
} else if (e.keyCode === 40 && cursor < searchName.length - 1) {
this.setState(prevState => ({
cursor: prevState.cursor + 1
}));
}
};
render() {
const { searchName, location } = this.state;
return (
<div className="Search">
<h1>Where are you going?</h1>
<form id="search-form" onSubmit={this.handleSubmit}>
<label htmlFor="location">Pick-up Location</label>
<input
type="text"
id="location"
value={location}
placeholder="city, airport, station, region, district..."
onChange={this.handleChange}
onKeyUp={this.handleKeyUp}
onKeyDown={this.handleKeyPress}
/>
{this.state.showSearch ? (
<Suggestions searchName={searchName} />
) : null}
<button value="submit" type="submit" id="search-button">
Search
</button>
</form>
</div>
);
}
Code that renders the list from the restful API:
.then(res =>
this.setState({
searchName: res.data.results.docs.map(array => (
<a href="#">
<div
key={array.ufi}
className="locations"
>
{array.name}
</div>
</a>
))
})
);
javascript reactjs autocomplete
add a comment |
up vote
-1
down vote
favorite
As part of a technical test, I've been asked to write an autocomplete input in React. I've done this but I'd now like to add the functionality of navigating up and down the rendered list with the arrow keys. I've done some extensive Googling and found nothing React specific apart from npm packages.
To be clear, I'm looking for something like this but for React: https://www.w3schools.com/howto/howto_js_autocomplete.asp
All I basically need is the arrow button functionality, I've got everything else working fine.
Cheers
Here's an example that I tried but couldn't get working.
export default class Example extends Component {
constructor(props) {
super(props)
this.handleKeyDown = this.handleKeyDown.bind(this)
this.state = {
cursor: 0,
result:
}
}
handleKeyDown(e) {
const { cursor, result } = this.state
// arrow up/down button should select next/previous list element
if (e.keyCode === 38 && cursor > 0) {
this.setState( prevState => ({
cursor: prevState.cursor - 1
}))
} else if (e.keyCode === 40 && cursor < result.length - 1) {
this.setState( prevState => ({
cursor: prevState.cursor + 1
}))
}
}
render() {
const { cursor } = this.state
return (
<Container>
<Input onKeyDown={ this.handleKeyDown }/>
<List>
{
result.map((item, i) => (
<List.Item
key={ item._id }
className={cursor === i ? 'active' : null}
>
<span>{ item.title }</span>
</List.Item>
))
}
</List>
</Container>
)
}
}
And here is my code:
class Search extends Component {
constructor(props) {
super(props);
this.state = {
location: '',
searchName: '',
showSearch: false,
cursor: 0
};
}
handleKeyPress = e => {
const { cursor, searchName } = this.state;
// arrow up/down button should select next/previous list element
if (e.keyCode === 38 && cursor > 0) {
this.setState(prevState => ({
cursor: prevState.cursor - 1
}));
} else if (e.keyCode === 40 && cursor < searchName.length - 1) {
this.setState(prevState => ({
cursor: prevState.cursor + 1
}));
}
};
render() {
const { searchName, location } = this.state;
return (
<div className="Search">
<h1>Where are you going?</h1>
<form id="search-form" onSubmit={this.handleSubmit}>
<label htmlFor="location">Pick-up Location</label>
<input
type="text"
id="location"
value={location}
placeholder="city, airport, station, region, district..."
onChange={this.handleChange}
onKeyUp={this.handleKeyUp}
onKeyDown={this.handleKeyPress}
/>
{this.state.showSearch ? (
<Suggestions searchName={searchName} />
) : null}
<button value="submit" type="submit" id="search-button">
Search
</button>
</form>
</div>
);
}
Code that renders the list from the restful API:
.then(res =>
this.setState({
searchName: res.data.results.docs.map(array => (
<a href="#">
<div
key={array.ufi}
className="locations"
>
{array.name}
</div>
</a>
))
})
);
javascript reactjs autocomplete
Have you made any attempt to implement the arrow functionality you want yet? Please post the code you've tried
– CertainPerformance
Nov 9 at 11:08
I've tried a few things I found on here but it didn't work. I'll post my code now.
– Daniel Cross
Nov 9 at 11:10
create functionhandleKeyDown
ashandleKeyDown = (e) => ...
, or useonKeyDown={this.handleKeyDown.bind(this)}
for the function to get the correctthis
context
– Sim Dim
Nov 9 at 11:19
Tried that but can't get it to cycle still.
– Daniel Cross
Nov 9 at 11:28
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
As part of a technical test, I've been asked to write an autocomplete input in React. I've done this but I'd now like to add the functionality of navigating up and down the rendered list with the arrow keys. I've done some extensive Googling and found nothing React specific apart from npm packages.
To be clear, I'm looking for something like this but for React: https://www.w3schools.com/howto/howto_js_autocomplete.asp
All I basically need is the arrow button functionality, I've got everything else working fine.
Cheers
Here's an example that I tried but couldn't get working.
export default class Example extends Component {
constructor(props) {
super(props)
this.handleKeyDown = this.handleKeyDown.bind(this)
this.state = {
cursor: 0,
result:
}
}
handleKeyDown(e) {
const { cursor, result } = this.state
// arrow up/down button should select next/previous list element
if (e.keyCode === 38 && cursor > 0) {
this.setState( prevState => ({
cursor: prevState.cursor - 1
}))
} else if (e.keyCode === 40 && cursor < result.length - 1) {
this.setState( prevState => ({
cursor: prevState.cursor + 1
}))
}
}
render() {
const { cursor } = this.state
return (
<Container>
<Input onKeyDown={ this.handleKeyDown }/>
<List>
{
result.map((item, i) => (
<List.Item
key={ item._id }
className={cursor === i ? 'active' : null}
>
<span>{ item.title }</span>
</List.Item>
))
}
</List>
</Container>
)
}
}
And here is my code:
class Search extends Component {
constructor(props) {
super(props);
this.state = {
location: '',
searchName: '',
showSearch: false,
cursor: 0
};
}
handleKeyPress = e => {
const { cursor, searchName } = this.state;
// arrow up/down button should select next/previous list element
if (e.keyCode === 38 && cursor > 0) {
this.setState(prevState => ({
cursor: prevState.cursor - 1
}));
} else if (e.keyCode === 40 && cursor < searchName.length - 1) {
this.setState(prevState => ({
cursor: prevState.cursor + 1
}));
}
};
render() {
const { searchName, location } = this.state;
return (
<div className="Search">
<h1>Where are you going?</h1>
<form id="search-form" onSubmit={this.handleSubmit}>
<label htmlFor="location">Pick-up Location</label>
<input
type="text"
id="location"
value={location}
placeholder="city, airport, station, region, district..."
onChange={this.handleChange}
onKeyUp={this.handleKeyUp}
onKeyDown={this.handleKeyPress}
/>
{this.state.showSearch ? (
<Suggestions searchName={searchName} />
) : null}
<button value="submit" type="submit" id="search-button">
Search
</button>
</form>
</div>
);
}
Code that renders the list from the restful API:
.then(res =>
this.setState({
searchName: res.data.results.docs.map(array => (
<a href="#">
<div
key={array.ufi}
className="locations"
>
{array.name}
</div>
</a>
))
})
);
javascript reactjs autocomplete
As part of a technical test, I've been asked to write an autocomplete input in React. I've done this but I'd now like to add the functionality of navigating up and down the rendered list with the arrow keys. I've done some extensive Googling and found nothing React specific apart from npm packages.
To be clear, I'm looking for something like this but for React: https://www.w3schools.com/howto/howto_js_autocomplete.asp
All I basically need is the arrow button functionality, I've got everything else working fine.
Cheers
Here's an example that I tried but couldn't get working.
export default class Example extends Component {
constructor(props) {
super(props)
this.handleKeyDown = this.handleKeyDown.bind(this)
this.state = {
cursor: 0,
result:
}
}
handleKeyDown(e) {
const { cursor, result } = this.state
// arrow up/down button should select next/previous list element
if (e.keyCode === 38 && cursor > 0) {
this.setState( prevState => ({
cursor: prevState.cursor - 1
}))
} else if (e.keyCode === 40 && cursor < result.length - 1) {
this.setState( prevState => ({
cursor: prevState.cursor + 1
}))
}
}
render() {
const { cursor } = this.state
return (
<Container>
<Input onKeyDown={ this.handleKeyDown }/>
<List>
{
result.map((item, i) => (
<List.Item
key={ item._id }
className={cursor === i ? 'active' : null}
>
<span>{ item.title }</span>
</List.Item>
))
}
</List>
</Container>
)
}
}
And here is my code:
class Search extends Component {
constructor(props) {
super(props);
this.state = {
location: '',
searchName: '',
showSearch: false,
cursor: 0
};
}
handleKeyPress = e => {
const { cursor, searchName } = this.state;
// arrow up/down button should select next/previous list element
if (e.keyCode === 38 && cursor > 0) {
this.setState(prevState => ({
cursor: prevState.cursor - 1
}));
} else if (e.keyCode === 40 && cursor < searchName.length - 1) {
this.setState(prevState => ({
cursor: prevState.cursor + 1
}));
}
};
render() {
const { searchName, location } = this.state;
return (
<div className="Search">
<h1>Where are you going?</h1>
<form id="search-form" onSubmit={this.handleSubmit}>
<label htmlFor="location">Pick-up Location</label>
<input
type="text"
id="location"
value={location}
placeholder="city, airport, station, region, district..."
onChange={this.handleChange}
onKeyUp={this.handleKeyUp}
onKeyDown={this.handleKeyPress}
/>
{this.state.showSearch ? (
<Suggestions searchName={searchName} />
) : null}
<button value="submit" type="submit" id="search-button">
Search
</button>
</form>
</div>
);
}
Code that renders the list from the restful API:
.then(res =>
this.setState({
searchName: res.data.results.docs.map(array => (
<a href="#">
<div
key={array.ufi}
className="locations"
>
{array.name}
</div>
</a>
))
})
);
javascript reactjs autocomplete
javascript reactjs autocomplete
edited Nov 9 at 11:40
asked Nov 9 at 11:07
Daniel Cross
67
67
Have you made any attempt to implement the arrow functionality you want yet? Please post the code you've tried
– CertainPerformance
Nov 9 at 11:08
I've tried a few things I found on here but it didn't work. I'll post my code now.
– Daniel Cross
Nov 9 at 11:10
create functionhandleKeyDown
ashandleKeyDown = (e) => ...
, or useonKeyDown={this.handleKeyDown.bind(this)}
for the function to get the correctthis
context
– Sim Dim
Nov 9 at 11:19
Tried that but can't get it to cycle still.
– Daniel Cross
Nov 9 at 11:28
add a comment |
Have you made any attempt to implement the arrow functionality you want yet? Please post the code you've tried
– CertainPerformance
Nov 9 at 11:08
I've tried a few things I found on here but it didn't work. I'll post my code now.
– Daniel Cross
Nov 9 at 11:10
create functionhandleKeyDown
ashandleKeyDown = (e) => ...
, or useonKeyDown={this.handleKeyDown.bind(this)}
for the function to get the correctthis
context
– Sim Dim
Nov 9 at 11:19
Tried that but can't get it to cycle still.
– Daniel Cross
Nov 9 at 11:28
Have you made any attempt to implement the arrow functionality you want yet? Please post the code you've tried
– CertainPerformance
Nov 9 at 11:08
Have you made any attempt to implement the arrow functionality you want yet? Please post the code you've tried
– CertainPerformance
Nov 9 at 11:08
I've tried a few things I found on here but it didn't work. I'll post my code now.
– Daniel Cross
Nov 9 at 11:10
I've tried a few things I found on here but it didn't work. I'll post my code now.
– Daniel Cross
Nov 9 at 11:10
create function
handleKeyDown
as handleKeyDown = (e) => ...
, or use onKeyDown={this.handleKeyDown.bind(this)}
for the function to get the correct this
context– Sim Dim
Nov 9 at 11:19
create function
handleKeyDown
as handleKeyDown = (e) => ...
, or use onKeyDown={this.handleKeyDown.bind(this)}
for the function to get the correct this
context– Sim Dim
Nov 9 at 11:19
Tried that but can't get it to cycle still.
– Daniel Cross
Nov 9 at 11:28
Tried that but can't get it to cycle still.
– Daniel Cross
Nov 9 at 11:28
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
Since you are defining a function as handleKeyDown(e) {...}
the context this
is not pointing to the context of class instance, the context will be supplied by onKeyDown (and I suppose it's window
as this
)
So, you have 2 ways to go:
declare your function as
handleKeyDown = (e) => {...}
bind handleKeyDown context to component instance like
onKeyDown={this.handleKeyDown.bind(this)}
Also, don't forget that you may want a mod items.length counter, meaning when your press down and the last item is already selected, it would go to the first item.
Your api usage with storing markdown into the state is just a terrible thing to do. You don't have access to these strings anymore, instead save it as a plain array. Pass it where you need it, and use it to create jsx there.
Also, you don't use cursor from your state at all.
Declared an event handler and the cursor counts correctly but it's not highlighting the options. I suspect it's because I've not assigned the value to the returned list.
– Daniel Cross
Nov 9 at 11:34
@DanielCross I don't know the List.Item implementation, does it take className prop?
– Sim Dim
Nov 9 at 11:37
My list renders on keyPressUp and does a get request to a restful API. Here's the code for that: I've changed the classname and tried that option but it still won't work.
– Daniel Cross
Nov 9 at 11:39
@DanielCross yeah, don't do that, instead save the array as is, and convert it to the jsx where needed (it seems to be Suggestions component)
– Sim Dim
Nov 9 at 11:45
makes sense. Thanks
– Daniel Cross
Nov 9 at 12:01
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
Since you are defining a function as handleKeyDown(e) {...}
the context this
is not pointing to the context of class instance, the context will be supplied by onKeyDown (and I suppose it's window
as this
)
So, you have 2 ways to go:
declare your function as
handleKeyDown = (e) => {...}
bind handleKeyDown context to component instance like
onKeyDown={this.handleKeyDown.bind(this)}
Also, don't forget that you may want a mod items.length counter, meaning when your press down and the last item is already selected, it would go to the first item.
Your api usage with storing markdown into the state is just a terrible thing to do. You don't have access to these strings anymore, instead save it as a plain array. Pass it where you need it, and use it to create jsx there.
Also, you don't use cursor from your state at all.
Declared an event handler and the cursor counts correctly but it's not highlighting the options. I suspect it's because I've not assigned the value to the returned list.
– Daniel Cross
Nov 9 at 11:34
@DanielCross I don't know the List.Item implementation, does it take className prop?
– Sim Dim
Nov 9 at 11:37
My list renders on keyPressUp and does a get request to a restful API. Here's the code for that: I've changed the classname and tried that option but it still won't work.
– Daniel Cross
Nov 9 at 11:39
@DanielCross yeah, don't do that, instead save the array as is, and convert it to the jsx where needed (it seems to be Suggestions component)
– Sim Dim
Nov 9 at 11:45
makes sense. Thanks
– Daniel Cross
Nov 9 at 12:01
add a comment |
up vote
0
down vote
accepted
Since you are defining a function as handleKeyDown(e) {...}
the context this
is not pointing to the context of class instance, the context will be supplied by onKeyDown (and I suppose it's window
as this
)
So, you have 2 ways to go:
declare your function as
handleKeyDown = (e) => {...}
bind handleKeyDown context to component instance like
onKeyDown={this.handleKeyDown.bind(this)}
Also, don't forget that you may want a mod items.length counter, meaning when your press down and the last item is already selected, it would go to the first item.
Your api usage with storing markdown into the state is just a terrible thing to do. You don't have access to these strings anymore, instead save it as a plain array. Pass it where you need it, and use it to create jsx there.
Also, you don't use cursor from your state at all.
Declared an event handler and the cursor counts correctly but it's not highlighting the options. I suspect it's because I've not assigned the value to the returned list.
– Daniel Cross
Nov 9 at 11:34
@DanielCross I don't know the List.Item implementation, does it take className prop?
– Sim Dim
Nov 9 at 11:37
My list renders on keyPressUp and does a get request to a restful API. Here's the code for that: I've changed the classname and tried that option but it still won't work.
– Daniel Cross
Nov 9 at 11:39
@DanielCross yeah, don't do that, instead save the array as is, and convert it to the jsx where needed (it seems to be Suggestions component)
– Sim Dim
Nov 9 at 11:45
makes sense. Thanks
– Daniel Cross
Nov 9 at 12:01
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
Since you are defining a function as handleKeyDown(e) {...}
the context this
is not pointing to the context of class instance, the context will be supplied by onKeyDown (and I suppose it's window
as this
)
So, you have 2 ways to go:
declare your function as
handleKeyDown = (e) => {...}
bind handleKeyDown context to component instance like
onKeyDown={this.handleKeyDown.bind(this)}
Also, don't forget that you may want a mod items.length counter, meaning when your press down and the last item is already selected, it would go to the first item.
Your api usage with storing markdown into the state is just a terrible thing to do. You don't have access to these strings anymore, instead save it as a plain array. Pass it where you need it, and use it to create jsx there.
Also, you don't use cursor from your state at all.
Since you are defining a function as handleKeyDown(e) {...}
the context this
is not pointing to the context of class instance, the context will be supplied by onKeyDown (and I suppose it's window
as this
)
So, you have 2 ways to go:
declare your function as
handleKeyDown = (e) => {...}
bind handleKeyDown context to component instance like
onKeyDown={this.handleKeyDown.bind(this)}
Also, don't forget that you may want a mod items.length counter, meaning when your press down and the last item is already selected, it would go to the first item.
Your api usage with storing markdown into the state is just a terrible thing to do. You don't have access to these strings anymore, instead save it as a plain array. Pass it where you need it, and use it to create jsx there.
Also, you don't use cursor from your state at all.
edited Nov 9 at 11:47
answered Nov 9 at 11:24
Sim Dim
36527
36527
Declared an event handler and the cursor counts correctly but it's not highlighting the options. I suspect it's because I've not assigned the value to the returned list.
– Daniel Cross
Nov 9 at 11:34
@DanielCross I don't know the List.Item implementation, does it take className prop?
– Sim Dim
Nov 9 at 11:37
My list renders on keyPressUp and does a get request to a restful API. Here's the code for that: I've changed the classname and tried that option but it still won't work.
– Daniel Cross
Nov 9 at 11:39
@DanielCross yeah, don't do that, instead save the array as is, and convert it to the jsx where needed (it seems to be Suggestions component)
– Sim Dim
Nov 9 at 11:45
makes sense. Thanks
– Daniel Cross
Nov 9 at 12:01
add a comment |
Declared an event handler and the cursor counts correctly but it's not highlighting the options. I suspect it's because I've not assigned the value to the returned list.
– Daniel Cross
Nov 9 at 11:34
@DanielCross I don't know the List.Item implementation, does it take className prop?
– Sim Dim
Nov 9 at 11:37
My list renders on keyPressUp and does a get request to a restful API. Here's the code for that: I've changed the classname and tried that option but it still won't work.
– Daniel Cross
Nov 9 at 11:39
@DanielCross yeah, don't do that, instead save the array as is, and convert it to the jsx where needed (it seems to be Suggestions component)
– Sim Dim
Nov 9 at 11:45
makes sense. Thanks
– Daniel Cross
Nov 9 at 12:01
Declared an event handler and the cursor counts correctly but it's not highlighting the options. I suspect it's because I've not assigned the value to the returned list.
– Daniel Cross
Nov 9 at 11:34
Declared an event handler and the cursor counts correctly but it's not highlighting the options. I suspect it's because I've not assigned the value to the returned list.
– Daniel Cross
Nov 9 at 11:34
@DanielCross I don't know the List.Item implementation, does it take className prop?
– Sim Dim
Nov 9 at 11:37
@DanielCross I don't know the List.Item implementation, does it take className prop?
– Sim Dim
Nov 9 at 11:37
My list renders on keyPressUp and does a get request to a restful API. Here's the code for that: I've changed the classname and tried that option but it still won't work.
– Daniel Cross
Nov 9 at 11:39
My list renders on keyPressUp and does a get request to a restful API. Here's the code for that: I've changed the classname and tried that option but it still won't work.
– Daniel Cross
Nov 9 at 11:39
@DanielCross yeah, don't do that, instead save the array as is, and convert it to the jsx where needed (it seems to be Suggestions component)
– Sim Dim
Nov 9 at 11:45
@DanielCross yeah, don't do that, instead save the array as is, and convert it to the jsx where needed (it seems to be Suggestions component)
– Sim Dim
Nov 9 at 11:45
makes sense. Thanks
– Daniel Cross
Nov 9 at 12:01
makes sense. Thanks
– Daniel Cross
Nov 9 at 12:01
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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%2f53224561%2freact-js-autocomplete-from-scratch%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
Have you made any attempt to implement the arrow functionality you want yet? Please post the code you've tried
– CertainPerformance
Nov 9 at 11:08
I've tried a few things I found on here but it didn't work. I'll post my code now.
– Daniel Cross
Nov 9 at 11:10
create function
handleKeyDown
ashandleKeyDown = (e) => ...
, or useonKeyDown={this.handleKeyDown.bind(this)}
for the function to get the correctthis
context– Sim Dim
Nov 9 at 11:19
Tried that but can't get it to cycle still.
– Daniel Cross
Nov 9 at 11:28