0

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?

4
  • Here is a sandbox of your component. I can see that the onChange is working properly. Anything I am missing here? Commented Apr 26, 2020 at 15:04
  • Yeah, it should work like in this sandbox but it doesn't in my app :( I don't know where to look for if this part of code is correct. As I told, it's multi step form. Maybe something it's not ok with passing state between components? Commented Apr 26, 2020 at 15:20
  • The problem is ShouldComponentUpdate function but I still don't know how to fix it... I updated my question. Commented Apr 26, 2020 at 15:28
  • can you create a sample with material table config you using. because as per the sample code provided, it should work. Commented Apr 26, 2020 at 18:29

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

2 Comments

As we discussed it further on facebook group you need condition like if (this.props.addTest !== nextProps.addTest || this.props.position !== nextProps.position) { return true; } else { return false; } but I agree with Akhil - it would be easier if you share code.
I added MaterialTable code to sandbox provided earlier by Ajin Kabeer codesandbox.io/s/fervent-khayyam-2xt3t?file=/src/App.js but you have already solved it :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.