I currently have a React Material form with a select dropdown, in which I map over an array of objects and display the name field as each option. I've currently set the option's value attribute to the object's name (cpuParent.name). However, the same object also has a wattage field (cpuParent.wattage), the value of which I also need. Is there a way that I can get both the name and the wattage of the object from the same dropdown field? I've copied and pasted the relevant snippets of my code below - the component is a class component:

Within the class component, but outside the render method:

```
constructor(props) {
    super(props);

    this.state = {
        calculator: {
            cpuParent: '',
            cpuChild: 0
        }
    }
}

handleChange = name => event => {
    this.setState({
        calculator: {
            ...this.state.calculator,
            [name]: event.target.value
        }
    });
};

```

Inside the render method:

```
// Destructure the state
const {calculator: {cpuParent, cpuChild}} = this.state;

// Destructure the props
const {classes, cpuParents} = this.props;

<FormControl className={classes.formControl}>
    <NativeSelect
        value={cpuParent}
        onChange={this.handleChange('cpuParent')}
        inputProps={{'aria-label': 'CPU Parent'}}
    >
        <option value="">Select Brand</option>
        {
            cpuParents.map(cpuParent => (
                <option key={cpuParent.id} value={cpuParent.name}>
                    {cpuParent.name}
                </option>
            ))
        }
    </NativeSelect>
</FormControl>

```