React Props in main component, change to state on change dropdown

Question

I have a main component that is calling a list. I am passing this item to one of the components prop which is the value of a dropdown.
For me to be able to setstate, I assigned the prop to state variable. Now on change, I am not able to get the prop, dropdown selected value populating.
<Stack tokens={stackTokens}> <Dropdown required={true} onChange={this._getDropdownItem} placeholder="Select Status" label="Status" options={this.state.StatusListItems} selectedKey={this.state.StatusDropvalueState}//initially it was this.props.value. styles={dropdownStyles} /> </Stack>

The this.props.value is getting a list item field and assigning it fine. But on change I need to get the changed dropdown item which is why I set state
this.setState({StatusDropvalueState:this.props.StatusDropvalue}); in componentdidmount()
Now it is not setting the dropdownvalue when loaded.
So my question is how do I pass props and set the dropdownvalue on load and also handle the change state?

Answer 1

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 });
}