ReactJS and AltJS Using DropDown Button

Question

I'm having trouble figuring out why this won't work. I created a drop down button which is filled with my users or a array. However it exists in the component <DropDown/>

I want to pass up the selected user in the drop down to my component . I thought about using flux(altjs) to communicate with my components.

Within my UserStore I have

this.selected = "";
this.bindListeners({
  handleSelected: UserActions.GET_SELECTED;
})

handleSelected(data) {
  this.selected = data;
}

Within in useraction I just state the action which is

getSelected(data) {
   this.dispatch(data)
}

My react component for my dropdown is this:

import React from 'react';
import {Link,State, Route} from 'react-router';
import Router from 'react-router';
import UserActions from 'actions/UserActions';
import UserStore from 'stores/UserStore';
import ReportsStore from 'stores/ReportsStore';
import ReportsActions from 'actions/ReportsActions';
export default class Dropdown extends React.Component {
constructor(props) {
  super(props);
  this.state = ReportsStore.getState();
  this.state = UserStore.getState();
  this.state.link = window.location.href;
  this.state.singleReport = [];
  this.state.listVisible = false;
  this.state.display ="";
    }

componentDidMount() {
  let state = this.state.link;
  state = state.split('/');
  state = state[state.length-1];
  ReportsActions.getSoloReport(state);
  ReportsStore.listen(this._onChanges);
    }

componentWillUnmount() {
  ReportsStore.unlisten(this._onChanges);
    }

_onChanges = () => {
  this.setState({
      singleReport: ReportsStore.getState().singleReport,
      duplicate: ReportsStore.getState().singleReport
    });
}

select = (item) => {
  this.props.selected = item;
  UserActions.getSelected(item);
}

show = () => {
  this.setState({listVisible: true});
  document.addEventListener("click", this.hide);
}

hide = () => {
  this.setState({listVisible: false});
  document.removeEventListener("click", this.hide);
}



render(){
          if(this.props.selected == undefined) {
            this.props.selected.email = "Ui";
            this.props.selected.profile.firstName = "jajaj";
            this.props.selected.profile.lastName = "blahablah";
          }
          return <div className={"dropdown-container" + (this.state.listVisible ? " show" : "")}>
            <div className={"dropdown-display" + (this.state.listVisible ? " clicked": "")} onClick={this.show}>
              <span style={{ color: 'white' }}>{this.props.selected.email + " : " + this.props.selected.profile.firstName + " " + this.props.selected.profile.lastName}</span>
              <i style={{ color: 'red' }} className="fa fa-angle-down"></i>
            </div>
            <div className="dropdown-list">
              <div>
                {this.renderListItems()}
              </div>
            </div>
          </div>;
        }

renderListItems() {
          let items = [];
          for (let i = 0; i < this.props.list.length; i++) {
            let item = this.props.list[i];
            items.push(<div onClick={this.select.bind(null, item)}>
              <span style={{ color: 'black' }}>{item.email + " : " + item.profile.firstName + " " + item.profile.lastName}</span>
              <i style={{ color: 'black' }} className="fa fa-check"></i>
            </div>);
          }
          return items;
        }
}

finally in my Add Report i just call the data that exists in this.selected by doing this

selectedId: UserStore.getState().selected

However after doing a console.log of selectedId in my render it returns undefined. Which makes no sense. IT should return the item that is clicked under selected()

EDIT: I had to change the variable of this.selected to this.selectedData or something else, it wouldn't read this.selected for some reason. So i can read it now. However, once I change the name on the dropdown, the new data is sent but whatever is at the current state for selected isn't displayed on the dropdown box.

Basically I can't get what I selected to show as selected in the UI (fill up the box if I hit "John Smith" in the drop down, however the data is being sent between components

Answer 1

So the problem was that whenever I select a user from a dropdown, flux tells my component to rerender, therefore the initial value of the dropdown was always the same. So in order to make it work like a dropdown, everytime I got the value of what I selected from my store, I would set that value to my initial value. So on every render it would render the correct element in the dropdown box.