this is my component
import React from 'react';
import {ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
var URL = "URL"
class DropDown extends React.Component {
constructor(props) {
super(props);
this.setState = this.setState.bind(this)
this.state = {
returnedItems: [],
SelectedItem: null
}
}
componentDidMount() {
fetch(URL)
.then(res => res.json())
.then(
(result) => {
this.setState({
returnedItems: result.map(x => x["firstName"]),
});
},
// need to handle the error like this or we'll end up catching react errors aswell.
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
handleClick = () => {
console.log('Click happened');
}
render(){
var items = this.state.returnedItems
return(
<div>
<select id="Salesmen">
{items.map(function(name, index){
return <option key={ index } id={ index } value={ name } onClick = {handleClick} >{ name }</option>
})}
</select>
</div>
);
}
}
export default DropDown; Essentially all I'm trying to do is execute the handleClick function onclick of any of these drop down options. the drop down options are created using the map function on an array called items.
Each one is assigned an ID, a value == to its content and finally is given an onClick. So on the dom they should all call handleClick() .
The problem is that "handleClick" is undefined. I don't see how it is, I've clearly defined it above the render function. Am I missing something about scope in react? I can't find any answers to this on google as it's quite a specific problem.
Thanks all, any pointers in the right direction will be greatly appreciated.
