Select value doesn't update on change in React

Question

When I choose option in select, in placeholder or label it doesn't update to chosen value. I have no more ideas how to fix it :(

I have two components. First:

class CreateProfile extends Component {
  state = {
    position: "",
  };

  addPosition = e => {
    const positionChosen = e.target.value;
    this.setState({
      position: positionChosen
    });
  };

  render() {
    const { position } = this.state;

  return(
   <AssignPosition
    addPosition={this.addPosition}
    position={position}
   />
 )
}
}

And in second file a have:

class AssignPosition extends Component {
  render() {
    const { addPosition, position } = this.props

  return(
    <select
       name="select"
       onChange={addPosition}
       value={position}
    >
       <option value="null">Choose position</option>
       <option value="position1">position1</option>
       <option value="position2">position2</option>
       <option value="position3">position3</option>
    </select>
  )
 }
}

When I select a position, as a label there's still "Choose position" not a value, that I have chosen. I don't want to paste too much code here, but in fact, it is multi step form. In AssignPosition I choose position and then click "next" to summary. And what's important, when I click "next" and then I click "back" in select label there is a correct value so it gets updated but somehow too late...

Any help would be appreciated. Please let me know if you need more code.

Edit: I found a problem. In AssignPosition I have also ShouldComponentUpdate function.

 shouldComponentUpdate(nextProps) {
    if (this.props.addTest === nextProps.addTest) {
      return false;
    } else {
      return true;
    }
  }

I need it, because on the same component I use MaterialTable and without this function, I had a problem described here: https://github.com/mbrn/material-table/issues/469 When I delete ShouldComponentUpdate, select works properly, but selection in MaterialTable doesn't :/ Any ideas how to fix it?

Answer 1

If I understand correctly - for some reason you use shouldComponentUpdate, so you should check if position in props is changed. Condition in shouldComponentUpdate should contain this.props.position === nextProps.position check.