I have an application that filters some test on a button click that populates and triggers a dropdown menu. My issue that I'm having is, I want to select the items within the dropdown menu via onclick() that updates the state of the selected test. It's unusual it does not work because when I console.log() the onUpdateSelectedTest I can see that state is being changed and updated but selectedTest remains undefined. Any examples, resources is greatly appreciated. 

All files are just snippets.

This is my TestActions.ts

```
export function UpdateSelectedTest(test: ITest): ToggleTestActionTypes {
  return {
    type: SELECT_TEST,
    payload: test
  };
}

```

This is my Dropdown.tsx

```
import * as React from "react";
import {
  UpdateSelectedTestType,
  UpdateSelectedTest
} from "../actions/TestActions";
import { ITestState } from "../models/ITestState";

interface IProps {
  onUpdatetoggleTestState: typeof UpdateSelectedTestType;
  onUpdateSelectedTest: typeof UpdateSelectedTest;
  toggleTestState: ITestState;
}
export class Dropdown extends React.Component<IProps> {
  public render() {
    let tests = null;

    tests = this.props.toggleTestState.tests.filter(
      test => test.testType === this.props.toggleTestState.testType
    );
    return (
      <div>
        <ul className="nav nav-pills">
          <a
            className="nav-link dropdown-toggle"
            data-toggle="dropdown"
            href="#"
            role="button"
            aria-haspopup="true"
            aria-expanded="true"
          ></a>
          <div
            className="dropdown-menu show"
            x-placement="bottom-start"
            style={{
              position: "relative",
              willChange: "transform",
              top: "0px",
              left: "0px",
              transform: "translate(0px, 40px, 0px"
            }}
          >
            {tests.map(test => (
              <a
                onClick={() => this.props.onUpdateSelectedTest(test)}
                className="dropdown-item"
                href="#"
              >
                <div className="dropdown-divider"></div>
                {test.name}: {test.description}
              </a>
            ))}
          </div>
        </ul>
      </div>
    );
  }
}

```

The problem occurs here in the Dropdown.tsx

```
{tests.map(test => (
                  <a
                    onClick={() => this.props.onUpdateSelectedTest(test)}
                    className="dropdown-item"
                    href="#"
                  >
                    <div className="dropdown-divider"></div>
                    {test.name}: {test.description}
                  </a>
  ))}

```

This is my Apps.tsx
I will past the state of the onUpdateSelectedTest to the ListGroup to be displayed.

```
import * as React from "react";
import { ToggleButtonGroup } from "./components/ToggleButtonGroup";
import { Dropdown } from "./components/Dropdown";
import { ITestState } from "./models/ITestState";
import { connect } from "react-redux";
import { AppState } from "./store";
import { bindActionCreators } from "redux";
import {
  UpdateSelectedTestType,
  UpdateSelectedTest
} from "./actions/TestActions";
import { ListGroup } from "./components/ListGroup";

interface IProps {
  onUpdatetoggleTestState: typeof UpdateSelectedTestType;
  onUpdateSelectedTest: typeof UpdateSelectedTest;
  toggleTestState: ITestState;
}

class App extends React.Component<IProps> {
  render() {
    return (
      <div>
        <ToggleButtonGroup
          toggleTestState={this.props.toggleTestState}
          onUpdatetoggleTestState={this.props.onUpdatetoggleTestState}
        />

        <Dropdown
          toggleTestState={this.props.toggleTestState}
          onUpdatetoggleTestState={this.props.onUpdatetoggleTestState}
          onUpdateSelectedTest={UpdateSelectedTest}
        />

        <ListGroup
          toggleTestState={this.props.toggleTestState}
          onUpdatetoggleTestState={this.props.onUpdatetoggleTestState}
          onUpdateSelectedTest={UpdateSelectedTest}
        />
      </div>
    );
  }
}

const mapStateToProps = (state: AppState) => ({
  toggleTestState: state.toggle
});

const mapDispatchToProps = (dispatch: any) => {
  return {
    onUpdatetoggleTestState: bindActionCreators(
      UpdateSelectedTestType,
      dispatch
    ),
    onUpdateSelectedTest: bindActionCreators(UpdateSelectedTest, dispatch)
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

```

This is my toggleButtonReducers.ts

```
   const initialState: ITetsState = {
      testType: TestType.test1,
      test: dbTests,
      question: dbQuestion,
      selectedTest: undefined
      //selectedQuestion: undefined
    };

    export function toggleButtonReducer(
      state = initialState,
      action: ToggleTestActionTypes
    ) {
      switch (action.type) {
        case TOGGLE_TEST_TYPE:
          return {
            ...state,
            testType: action.payload
          };
        case SELECT_TEST:
          return {
            ...state,
            selectedTest: action.payload
          };
        default:
          return state;
      }
    }

```