text: import React from "react"
  
  import { Element } from "react-scroll"
  import AllAlerts from "../../AllAlerts/index.js"
  import Selector from "../../Selector/index.js"
  
  class Objectives extends React.Component {
    constructor(props) {
      super(props)
  
      this.state = {
        selectedAlerts: [],
        selectedFYIs: [],
        currentOverview: "",
        filteredObjs: [],
      }
  
      this.handleObjectiveChange = this.handleObjectiveChange.bind(this)
    }
  
    handleObjectiveChange(e) {
      let objectives = this.props.objectives.objectives
      this.setState({
        selectedAlerts: [...objectives[e.target.value].alerts],
        currentObjective: e.target.value,
      })
      e.stopPropagation()
    }
  
    render() {
      return (
        <div>
          <Element id={"Selector-title"} />
          <Selector
            handleObjectiveChange={this.handleObjectiveChange}
            objectives={this.props.objectives.objectives}
            currentObjective={this.state.currentObjective}
          />
          <Element id={"Alerts-title"} />
          <AllAlerts
            objectives={this.props.objectives.objectives}
            alerts={this.props.objectives.alerts}
            fyis={this.props.objectives.fyis}
            selectedAlerts={this.state.selectedAlerts}
          />
        </div>
      )
    }
  }
  
  export default Objectives
  