Select Options: replace text with new value - html

Question

I feel as though I am very close to a solution for this. I searched for similar questions but I do not believe I have found the answer I am looking for.
What I would like:
I have a select dropdown with long text options, and would like to replace the value from handle change with the first word in the option, and set that as the new button select option.
What I currently have:
I modify the incoming handleChange to the first word, attempt to set it on the select button, and it never happens.
codepen: https://codepen.io/anon/pen/gdXVJM?editors=1011
code:
HTML
<div id="input"></div>
JS
class MyInput extends React.Component{
constructor(props){
super(props);
this.state = {
buttonStyle: '',
voiceSelected: ''
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
event.persist();
if (event.target.id === 'voiceSelected') {
//set the state we're going to use later
this.setState(() => ({ 'voiceSelected': event.target.value}));
//Take the first word from the string to make it visable on button
let totalWords = event.target.value
var firstWord = totalWords.replace(/ .*/,'');
console.log(firstWord)
this.setState(() => ({'buttonStyle': firstWord}));
} else {
console.log("Something Went Wrong!")
}
}
render(){
return <select
id="voiceSelected"
value={this.state.buttonStyle}
name={this.state.buttonStyle}
onChange={(e) => {this.handleChange(e)}}
>
<option value="" selected disabled hidden>Choose Voice</option>
<option value="Ivy">Ivy [English - American]</option>
<option value="Joanna">Joanna [English - American]</option>
<option value="Joey">Joey [English - American]</option>
<option value="Justin">Justin [English - American]</option>
<option value="Kendra">Kendra [English - American]</option>
<option value="Kimberly">Kimberly [English - American]</option>
<option value="Salli">Salli [English - American]</option>
<option value="Nicole">Nicole [English - Australian]</option>
<option value="Russell">Russell [English - Australian]</option>
<option value="Emma">Emma [English - British]</option>
<option value="Brian">Brian [English - British]</option>
<option value="Amy">Amy [English - British]</option>
<option value="Raveena">Raveena [English - Indian]</option>
<option value="Geraint">Geraint [English - Welsh]</option>
<option value="Ricardo">Ricardo [Brazilian Portuguese]</option>
<option value="Vitoria">Vitoria [Brazilian Portuguese]</option>
<option value="Lotte">Lotte [Dutch]</option>
<option value="Ruben">Ruben [Dutch]</option>
<option value="Mathieu">Mathieu [French]</option>
<option value="Celine">Celine [French]</option>
<option value="Chantal">Chantal [Canadian French]</option>
<option value="Marlene">Marlene [German]</option>
<option value="Dora">Dora [Icelandic]</option>
<option value="Karl">Karl [Icelandic]</option>
<option value="Carla">Carla [Italian]</option>
<option value="Giorgio">Giorgio [Italian]</option>
<option value="Mizuki">Mizuki [Japanese]</option>
<option value="Liv">Liv [Norwegian]</option>
<option value="Maja">Maja [Polish]</option>
<option value="Jan">Jan [Polish]</option>
<option value="Ewa">Ewa [Polish]</option>
<option value="Cristiano">Cristiano [Portuquese]</option>
<option value="Ines">Ines [Portuquese]</option>
<option value="Carmen">Carmen [Romanian]</option>
<option value="Maxim">Maxim [Russian]</option>
<option value="Tatyana">Tatyana [Russian]</option>
<option value="Enrique">Enrique [Spanish]</option>
<option value="Penelope">Penelope [US Spanish]</option>
<option value="Enrique">Miguel [US Spanish]</option>
<option value="Conchita">Conchita [Castilian Spanish]</option>
<option value="Astrid">Astrid [Swedish]</option>
<option value="Filiz">Filiz [Turkish]</option>
<option value="Gwyneth">Gwyneth [Welsh]</option>
</select>
}
}
ReactDOM.render(<MyInput/>, document.getElementById('input'));

Answer 1

<select> doesn't have 'value' attribute. we can get the value of select box by using 'selected' attribute in <options>
Please refer doc

Answer 2

I don't know if it suits you but if you can keep your options in the state you can somehow manipulate them. But with this method, you are losing the long values when you select an option. Maybe you can improve the logic starting with this answer.
class App extends React.Component {
state = {
options: [
"Ivy [English - American]",
"Joanna [English - American]",
"Joey [English - American]",
"Justin [English - American]"
],
selectedIndex: 0
};
handleChange = event => {
const { selectedIndex, value } = event.target;
const { options } = this.state;
var firstWord = value.replace(/ .*/, "");
const newOptions = Object.assign([], options, {
[selectedIndex - 1]: firstWord
});
this.setState({ options: newOptions, selectedIndex });
};
render() {
const { options } = this.state;
return (
<select
id="voiceSelected"
value={this.state.options[this.state.selectedIndex - 1]}
name={this.state.buttonStyle}
onChange={this.handleChange}
>
<option value="">Choose Voice</option>
{
options.map( option =>
<option key={option}>{option}</option>
)
}
</select>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>