Pass value from one dropdown to another dropdown-CodePudding

I have two dropdown in my component, the second dropdown will automatically change its value according to first dropdown value. But second dropdown can change its value too. Can you guys help me with the method/function. Any Help will be appreciate. Thank you in advance!

here's constant component

export const dropdownDenied= [
  {
    label: "None",
    value: "0"
  },
  {
    label: "Retail",
    value: "1"
  },
  {
    label: "Customer",
    value: "2"
  },
]

class ContentReceived extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    dropSelected : ""
     }

handleSelected = dropSelected => {
    this.setState({dropSelected})
  }

render(){

const { dropSelected } = this.props

return(
        //First DropDown

       <Select
        disabled={false}
        onChange={this.handleSelected}
        value={dropSelected}
      >
        {dropdownDenied.map((item, index) => (
         <option value={item.value || ""} key={index}>
         {item.label}  
         </option>
         ))}
      </Select>

    //Second DropDown
    Select
    value={dropSelected}
    onChange={e => {
    this.actionRow(
     i,
    {
     key: "reject_from",
     value: e.target.value
     },
     idx
     );
     }}
    >
    {dropdownDenied.map((item, index) => (
     <option value={item.value || ""} key={index}>
    {item.label}
     </option>
     ))}
</Select>

);

}

CodePudding user response：

i've got the answer:

add this after the state

class ContentReceived extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    dropSelected : ""
     }
this.handleSelected = this.handleSelected.bind(this) //<<<add this
}

handleSelected(e){
    this.setState({dropSelected: e.target.value});
  }

render(){

const { dropSelected } = this.props

return(
        //First DropDown

       <Select
        disabled={false}
        onChange={this.handleSelected}
        value={dropSelected}
      >
        {dropdownDenied.map((item, index) => (
         <option value={item.value || ""} key={index}>
         {item.label}  
         </option>
         ))}
      </Select>

    //Second DropDown
    Select
    value={dropSelected}
    onChange={e => {
    this.actionRow(
     i,
    {
     key: "reject_from",
     value: e.target.value
     },
     idx
     );
     }}
    >
    {dropdownDenied.map((item, index) => (
     <option value={item.value || ""} key={index}>
    {item.label}
     </option>
     ))}
</Select>

);

}

CodePudding user response：

In Second dropdown - in value attribute :- value = {secDValue}

Here take secDValue as local state

And onChange of both dropdown set value accordingly

First - onChange={(e) => setSecDValue()

Second - onChange={(e) => setSecDValue()