React and Semantic-ui-react, proxy event - reactjs

Question

I'm new in React and I'm using Semantic-ui-react. I'm trying to use the Dropdown.
When I want to get my value from the dropdown and call my function. My event get some proxy object.
handleTagChange(e) {
console.log("handleTagChange");
console.log(e);
}
But if I add something else like test in the function, the e.target.value works and test is the proxy object. Why is that?
handleTagChange(test, e) {
console.log("handleTagChange");
console.log(test);
console.log(e);
}
TagFilter.js
import React, { PropTypes } from 'react';
import { Dropdown } from 'semantic-ui-react'
export default class TagFilter extends React.PureComponent {
render() {
console.log(this.props);
const options = [
{ "text": "Admin stuff", "value": "admin stuff" },
{ "text": "Frontend", "value": "frontend" },
{ "text": "JS", "value": "js" },
{ "text": "Mucking about", "value": "mucking about" },
{ "text": "React", "value": "react" }
];
return (
<Dropdown placeholder='Skills' fluid selection options={options} onChange={this.props.handleTagChange} />
);
}
}
Employee.js
import React, { PropTypes } from 'react';
import { Image, List } from 'semantic-ui-react';
import TagFilter from './TagFilter';
import ProductFilter from './ProductFilter';
import MyModal from './Modal';
export default class Employees extends React.Component {
//static defaultProps = {
//}
constructor() {
super();
this.closeModal = this.closeModal.bind(this);
this.handleTagChange = this.handleTagChange.bind(this);
this.handleProductChange = this.handleProductChange.bind(this);
}
state = {
tagsFilterValue: null,
productsFilterValue: null,
employeeDetails: null,
openModal: false
}
handleTagChange(e) {
console.log("handleTagChange");
console.log(e);
}
handleProductChange(e) {
let productValue = e.target.value;
this.setState({productsFilterValue: productValue});
}
handleEmployeeClick(name, e) {
this.setState({employeeDetails: name});
this.setState({openModal: true});
}
closeModal() {
this.setState({openModal: false});
}
render() {
let filteredEmployees = this.props.data.filter(
(employee) => {
// If state tagsFilterValue and productsFilterValue is not null
if (this.state.tagsFilterValue && this.state.productsFilterValue) {
return employee.tags.indexOf(this.state.tagsFilterValue) !== -1 && employee.products.indexOf(this.state.productsFilterValue) !== -1;
}
// If state tagsFilterValue is not null
else if (this.state.tagsFilterValue) {
return employee.tags.indexOf(this.state.tagsFilterValue) !== -1;
}
// If state productsFilterValue is not null
else if (this.state.productsFilterValue) {
return employee.products.indexOf(this.state.productsFilterValue) !== -1;
}
else {
return employee;
}
}
);
let employeeDetails = this.props.data.filter(
(employee) => {
return employee.name.indexOf(this.state.employeeDetails) !== -1;
}
);
return (
<div>
{ employeeDetails.map((employee) => (
<MyModal employeeDetails={employee} closeModal={this.closeModal} openModal={this.state.openModal} />
))}
<div className="ui grid">
<TagFilter handleTagChange={this.handleTagChange} tagsFilterValue={this.state.tagsFilterValue} />
<ProductFilter handleProductChange={this.handleProductChange} productsFilterValue={this.state.productsFilterValue} />
</div>
<List>
{ filteredEmployees.map((employee) => (
<List.Item key={employee.name}>
<div className="ui card">
<div className="image">
<img alt="User avatar" src={employee.image}/>
</div>
<div className="content">
<a className="header" onClick={this.handleEmployeeClick.bind(this, employee.name)}>{employee.name}</a>
<div className="meta">{employee.title}</div>
</div>
</div>
</List.Item>
))}
</List>
</div>
);
}
}

Answer 1

This is happening because most semantic-ui-react events return 2 objects, and the second one is what contains the data that you need to handle the event.
There's a more detailed explanation in a GitHub issue here:
https://github.com/Semantic-Org/Semantic-UI-React/issues/638#issuecomment-252035750