I figured this out. Instead of trying to change props in component B, assign props from the main component A, I have added a function in the state and called this function which is prop for the component B.

StatusDropvalue={this.state.dropdownchanged?this.state.dropdownchanged:this.state.items.CurrentStatus} onNameChange={this.onChange}

In Component B IProps declared the function like below

onNameChange:((details: IComponentBState) => void)

In Component A set a function like below which gets changed dropdown value from Component B dropdown and assigns it to a state value in component A. This state value is sent as a prop to the componenet B in Component A.

private onChange(details){
  console.log("handle dropdown on change" + details);
  this.setState({dropdownchanged:details});

}

I figured this out. Instead of trying to change props in component B, assign props from the main component A, I have added a function in the state and called this function which is prop for the component B.

StatusDropvalue={this.state.dropdownchanged?this.state.dropdownchanged:this.state.items.CurrentStatus} onNameChange={this.onChange}

In Component B IProps declared the function like below:

onNameChange:((details: IComponentBState) => void)

In Component A set a function like below which gets changed drop-down value from Component B drop-down and assigns it to a state value in component A. This state value is sent as a prop to the component B in Component A.

private onChange(details) {
   console.log("handle dropdown on change" + details);
   this.setState({ dropdownchanged: details });
}