'How can I select this dropdown value in another dropdown?

enter image description here

Code For above image:-

<tr>
  {
    Object.values(selectedData).map((val, index) => {
      return (
        // <th key={index} className="Tabletitle"><AiOutlineCheck style={{ color: 'black', backgroundColor: "#41fc00", borderRadius: "25px" }} /> {val} </th>
        <th key={index} className="Tabletitle"><AiOutlineCheck style={{ color: 'black', backgroundColor: "#41fc00", borderRadius: "25px" }} />
          <select className="btn_Secondary" onChange={e => setPlayer(e.target.value)}>
            {val.map((val1, index) => {
              return (
                <option key={index} value="select" value={val1 ? val1 : ""}>{val1}</option>
              )
            }
            )}
          </select>
        </th>
      )
    })
  }
</tr>

first I have A, A1 $ B, B1 API data then I use the split method(comma) and then show API data in the option. Now I want that when the user selects the A1, A2 value from the dropdown it appears in another component dropdown as of now I have no idea how to display the selected value from 1 component to 2 components same value
I want A and B shown in another dropdown which is the next component

enter image description here

Plz help..



Solution 1:[1]

  • form changing value or source of a component(select) you have to use state in the container of components
  • onChanged method can update source or value in state with using setState

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arash Ghazi