根据 select 字段中的选择值填充

Question

I am new to react and had a design challenge to overcome. What I want to do is have a set of choice values in the choice field. Each choice value will have different set of KPIs and UOMs. Based on the choice value I selected I should be able to use pop up to select different KPI values. Once I select a set of KPI values. I should be able to display that in the table below.

Can anybody show me an example of how to do this? I am using material ui and react-bootstrap for the same

Here is the picture of that below

Answer 1

A very simple example:

function Page(props) {

    const [choice1, setChoice1] = React.useState(null)
    const [choice2, setChoice2] = React.useState(null)
    ... as many as you need
 
    const handleChoice1 = (event) => {
        setChoice1(event.target.value)
    }
    ... as many as you need
 
    return (
        <div>
            Your page here with selections that call your handleChoice functions when users select them
        </div>
        <Popup open={open}>
            <DisplayContent choice1={choice1} choice2={choice2} />
        </Popup>
        
    )
 
 }

Pass your state to <DisplayContent /> and render the correct data accordingly. Render nothing if they are null.

My example is overly simplistic since I don't know how you are implementing anything.