DropDownList State for Grid

Hi,

I am building a grid with DropDownList and Editable field. I am struggling to change the value of the DropDownList by changing state. All the DropDownLists have same set of values appearing in each row of the Grid.

I have tagged Id field of DropDownList with the rendered Id of the master data. Hence, after 'onChange' event fires, I am able to track the Id and lookup for the index of master data by the Id and then update the selected DropDownList value in it. I am then setting the state with the changed data which shows the selected value in the DropDownList.

Is there an easy way to handle DropDownList state change? How could I assign state for each row of a grid?

return (
            <Grid
                data={state.data}
                onItemChange={itemChange}
                editField="inEdit"
            >
                <Column field="Name" title="Name" sortable={false} />
                <Column field="Code" title="Code" cell={CodeList}/>
                <Column field="Notes" title="Notes" />
            </Grid>

const CodeList = (props) =>
    {
        return(
               <DropDownList 
                data={CodeNames} 
                value={props.dataItem.Code}
                onChange={handleChange}
                id={props.dataItem.Id}
            />
        );
    }