So let's say that I've added clothing pieces to a back-end rails api and Im trying to access these items through the React side of things, I know I can use the mapStateToProps(state){} function. However, I want to create interactivity in the UI between different pieces of application state from reducers (or redux store) where interactivity between different pieces of state are dependent on current state in component constructors. Is it possible for me to access this.props.contemplatedPiece for example in the constructor? Babel tells me Module build failed: SyntaxError: Unexpected token.

```
constructor(props){
    super(props);
    this.props.getInitialPieces();
        this.state = {
            if (this.props.contemplatedPiece.merch_type == 'top'){
                currentLowerComponent: this.props.suggestedBottoms[0],
                currentUpperComponent: this.props.contemplatedPiece,
                LowerComponents, UpperComponents: this.props.organizePieces();
            }
            else if (this.props.contemplatedPiece.merch_type == 'bottom'){
                currentLowerComponent: this.props.contemplatedPiece,
                currentUpperComponent: this.props.suggestedTops[0],
                UpperComponents, LowerComponents: this.props.organizePieces();
            }
            currentComponent: {whichComponent: null, whichPiece: null}
            UpperComponentEnabled: false,
            LowerComponentEnabled: false
        };
};

isOppositeComponentSuggested(whichComponent){
        var match = false;
        _.debounce((whichComponent) => {
            this.props.setContemplatedPiece(whichComponent).then(function(){
                this.props.getAncillaryPieces();
                if (this.props.contemplatedPiece.merch_type == 'top'){
                    this.props.suggestedBottoms.map((bottom) => {
                        if (this.state.currentLowerComponent == bottom){
                                match = true;
                        }
                    });
                }
                else if (this.props.contemplatedPiece.merch_type == 'bottom'){
                    this.props.suggestedTops.map((top) => {
                        if (this.state.currentUpperComponent == top){
                            match = true;
                        }               
                    });
                }
            });
        }, 6000);

        return match;
    }

    switchFocus(){
        if (this.state.currentUpperComponent.hasFocus()){
            this.state.currentLowerComponent.focus();
        }
        else if(this.state.currentLowerComponent.hasFocus()){       
            this.state.currentUpperComponent.focus();   
        }
        else {
          break;
        }
    }

    render(){
         return(
               <Wardrobe upperComponent={this.state.currentUpperComponent} lowerComponent={this.state.currentLowerComponent} currentComponent = {this.state.currentComponent} enableCapture={snapshot => this.snapshotMatch = snapshot} />
               <div className = "PossibleMatches_Container">
                    <i class = 'captureOutfit' onClick = {this.snapshotMatch}></i> 
                    {this.state.fieldForOrganizedPiecesArray.UpperComponents.map(function(topPiece){  
                        <UpperComponent key={topPiece.id} id={topPiece.id} ref={(piece)=>{this.setState({currentUpperComponent: piece})}} setCurrentComponent = {(piece) => this.setState(currentComponent.whichPiece: piece, currentComponent.whichComponent: 'u', lowerComponent: null, upperComponent: null)}  toggleToPiece={this.setState({currentLowerComponent: this.props.suggestedBottoms[0]}).then(function(){if (this.state.LowerComponentEnabled: false){this.setState(LowerComponentEnabled: true)}else{break;}})} image={topPiece.image} isLowerComponentEnabled={this.state.LowerComponentEnabled} switchComponent={this.switchFocus} evaluatePiece={isOppositeComponentSuggested} className={if (this.state.currentComponent.whichComponent == 'l'){'standalonePiece'}else if(this.state.currentComponent.whichComponent == 'l'){'PossibleMatchCollapse'} else{'UpperComponent_Container'}}/>
                    });}
                    {this.state.fieldForOrganizedPiecesArray.LowerComponents.map(function(bottomPiece){
                        <LowerComponent key={bottomPiece.id} id={bottomPiece.id} ref={(piece)=>{this.setState({currentLowerComponent: piece})}} setCurrentComponent = {(piece) => this.setState(currentComponent.whichPiece: piece, currentComponent.whichComponent: 'l', upperComponent: null, lowerComponent: null);}  toggleToPiece={this.setState({currentUpperComponent: this.props.suggestedTops[0]}).then(function(){if(this.state.UpperComponentEnabled: false){this.setState(UpperComponentEnabled: true)}})} isUpperComponentEnabled={this.state.UpperComponentEnabled} switchComponent={this.switchFocus} evaluatePiece={isOppositeComponentSuggested} className={ if (this.state.currentComponent.whichComponent == 'l'){'standalonePiece'} else if(this.state.currentComponent.whichComponent == 'u'){'PossibleMatchCollapse'} else{'LowerComponent_Container'}}/>
                    });}
                </div>
         );
    }
}

function mapStateToProps(state){
    return {
        contemplatedPiece: state.possibleMatches.contemplated_piece,
        extraTops: state.possibleMatches.extraTops,
        extraBottoms: state.possibleMatches.extraBottoms,
        standaloneTops: state.possibleMatches.standaloneTops,
        standaloneBottoms: state.possibleMatches.standaloneBottoms,
        suggestedTops: state.possibleMatches.suggestedTops,
        suggestedBottoms: state.possibleMatches.suggestedBottoms,
        UpperComponents: state.possibleMatches.UpperComponents,
        LowerComponents: state.possibleMatches.LowerComponents
    };
}

```

Here is the rest of the code