I have a component that renders a select element like so:

<select 
    name="directoryAttributes"
    id="dirSelect"
    className="form-control"
    onChange={this._handleChange}>
    {
        attributes.map(attribute => {
            return (
                <option
                    value={attribute}
                    key={attribute.directoryAttributesNo}
                >{attribute.label}</option>
            );
        })
    }
</select>

attribute is a plain object with some key/values. I want to call a handleChange to set my components state to that option value (i.e. attribute object). Here is my handleChange

_handleChange(e) {
    e.preventDefault();
    const element = e.target;
    const stateObject = {};

    stateObject[element.name] = element.value;
    this.setState(stateObject);
}

The issue is, it appears to set the state of directoryAttributes to [object Object]. Why is this happening, is it a quirk of react or something im missing?

Thanks in advance!

EDIT: the attributes array of objects comes from the state, just to clarify