1

I have the following code:

class SelectorEdit extends React.Component {
    constructor(){
        super();
        this.state = {
            displayText: '',
            isEditing: false
        };
        this.renderList = this.renderList.bind(this);
        this.onSelectionHandle = this.onSelectionHandle.bind(this);
    }

    componentDidMount(){
        if(typeof this.props.val !== 'undefined' && typeof this.props.options !== 'undefined'){

            let result = this.props.options.find(x => x.value === this.props.val);
            const displayText = result.text;
            this.setState( {displayText} );
        }
    }

    onSelectionHandle = (e) => {
        console.log('key: ', e); //returns undefined for e
    }

    renderList(){
        if (typeof this.props.options === "undefined"){
            return;
        } else if(this.props.options){
            return this.props.options.map((option)=>{
                return(
                    <Button eventKey={option.value} onClick={this.onSelectionHandle}>{option.text}</Button>
                );
            });
        }

    }

    render(){
        return(
            <div className="display-choices">
                <ButtonGroup >{this.renderList()}</ButtonGroup>
            </div>
        )
    }
}export default SelectorEdit;

I am not sure why the event does not pass in this situation? Does react-bootstrap allow you to get the event on a button click? Their example in the documentation only gives a scenario to get the click, not to get the selected item in the click. Any advice?

tcoulson
  • 602
  • 3
  • 10
  • 37
  • I changed the code according to your comments, is this more in line with what you are recommending? I am new to react-bootstrap, sort of feeling my way through. I am getting an error on the onSelectionHandle = (e) =>{ first equal sign. – tcoulson Jan 11 '18 at 20:00
  • sorry i was wrong, it does not appear bootstrap takes in the event, with react generally everything is kept in a manageable state. what are you looking to do with the event? – Eric Hasselbring Jan 11 '18 at 20:09
  • I have a button group. I would like to click on a button within the group and set my state according to the button clicked. I am using props to pass in whatever options I would like for the Buttons in the Button Group. – tcoulson Jan 11 '18 at 20:11

1 Answers1

1

You can do something like this rather than relying on the event. This can be refactored better but I am just trying to show the flow. Ultimately you could write the button as a pure component and handle the binding of the button text to the onSelectionHandle function.

    constructor(){
    super();
    this.state = {
        displayText: '',
        isEditing: false
    };
    this.renderList = this.renderList.bind(this);
    this.onSelectionHandle = this.onSelectionHandle.bind(this);
    this.bindSelectionHandle = this.bindSelectionHandle.bind(this);
}

onSelectionHandle( buttonText ) {
  console.log(buttonText); //returns button text clicked
}

bindSelectionHandle( buttonText ) {
  return onSelectionHandle.bind( this, buttonText )
}

renderList(){
  if (typeof this.props.options === "undefined"){
        return;
    } else if(this.props.options){
        return this.props.options.map((option)=>{
            return(
                <Button eventKey={option.value} onClick={this.bindSelectionHandle( option.text ) }>{option.text}</Button>
            );
        });
    }

}

render(){
    return(
        <div className="display-choices">
            <ButtonGroup >{this.renderList()}</ButtonGroup>
        </div>
    )
}
Eric Hasselbring
  • 1,374
  • 1
  • 10
  • 18
  • I keep getting errors on the equal sign onSelectionHandle = ( buttonText ) => {. Is this es7 code or do I need to do anything to get this to render correctly? – tcoulson Jan 11 '18 at 20:33
  • whats the error say? also remove `this.onSelectionHandle = this.onSelectionHandle.bind(this);` – Eric Hasselbring Jan 11 '18 at 20:34
  • might be related to this https://stackoverflow.com/questions/44360178/react-es6-unexpected-token – tcoulson Jan 11 '18 at 20:36
  • ah yes, you will need that or just convert back to the way you were doing it with binding in the constructor – Eric Hasselbring Jan 11 '18 at 20:38
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163016/discussion-between-tcoulson-and-eric-hasselbring). – tcoulson Jan 11 '18 at 20:47