React and Semantic-ui-react, proxy event

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