import React from "react" ; import { connect } from "react-redux" ; import { TemplateClause } from "../../templates/types" ; import { setClauseIndex } from "../actions" ; import { getSelectedClauseIndex , getSpendContract , getSpendContractClauses , getSpendContractId } from "../selectors" ; const ClauseSelect = ( props ) => { return ( < section > < h4 > Clause < /h4> < select className = "form-control" value = { props . spendIndex } onChange = { e => props . setClauseIndex ( parseInt ( e . target . value , 10 ) ) } > { props . clauses . map ( ( clause , i ) => ( < option key = { clause . name } value = { i } > { clause . name } < /option>))} < /select> < /section>); } ; export default connect ( state => ( { spendIndex : getSelectedClauseIndex ( state ) , clauses : getSpendContractClauses ( state ) , contractId : getSpendContractId ( state ) } ) , { setClauseIndex } ) ( ClauseSelect ) ;