score:1

Accepted answer

you cannot change the props directly, either you call a parent function to change the props that are passed to your component or in your local copy that you createm you can change them. shouldcomponentupdate is only called when a state has changed either directly or from the props, you are not doing any of that, only modifying the local copy and hence no change is triggered

do something like

var reactdom = require('react-dom');
var react = require('react');

   class button extends react.component {
constructor(props) {
    super(props);
    console.log(props);
    this.state = {options = props.options};
}
componentwillrecieveprops(nextprops) {
  if(nextprops.options !== this.props.options) {
    this.setstate({options: nextprops.options})
  }
}
componentwillmount () {
    var defaultfeatureoptionid = this.props.feature.defaultfeatureoptionid;
    var options = [...this.state.options]
    options.foreach((option) => {
        var classes = "";
        if (option.description.length > 10) {
            classes = "option-button big-button hidden";
        } else {
            classes = "option-button small-button hidden";
        }
        if (option.id === defaultfeatureoptionid) {
            classes = classes.replace("hidden", " selected");
            option.selected = true;
        }
        option.class = classes;
    });
    this.setstate({options})
}
shouldcomponentupdate(props) {
    console.log("update");
}
toggledropdown(index) {

    var options = [...this.state.options];
    var options = options[index];
    option.selected = !option.selected;
    options.foreach((opt) => {
        if (option.id !== opt.id) {
            opt.class = opt.class.replace("hidden", "");
        }
        else if(option.id === opt.id && option.selected) {
            opt.class = opt.class.replace("", "selected");
        } 
    });   
    this.setstate({options})
}
render() {
    if (this.state.options) {
        return (<div> {
            this.state.options.map((option, index) => {
                return <div classname={ option.class } key={option.id}>
                    <div> {option.description}</div>
                    <img classname="option-image" src={option.imageurl}></img>
                    <i classname="fa fa-chevron-down" aria-hidden="true" onclick={() => this.toggledropdown(index) }></i>
                    </div>
            })
        }

        </div>
        )
    }     
    else {
        return <div>no options defined</div>
    }
}
 }

 module.exports = button;

Related Query

More Query from same tag