I'm currently working with the following code snippets:
--- before rendering ---
const fontArray = [
["Standard", "Standard"], ["Abril FatFace", "'Abril Fatface', cursive"],
["Alfa Slab One", "'Alfa Slab One', cursive"],
["Chonburi", "'Chonburi', cursive"], ["Comfortaa", "'Comfortaa', cursive"],
["Lobster", "'Lobster', cursive"], ["Pacfico", "'Pacifico', cursive"]
]
--- during render ---
<FormControl style={{margin: '10px'}}>
<InputLabel htmlFor="select-font">Font</InputLabel>
<Select
value={this.state.font[0]}
onChange={(evt)=>this.handleFontChange(evt)}
inputProps={{
name: 'font',
id: 'select-font',
}}
>
{fontArray.map((font, index)=>{
return(
<MenuItem key={font} value={font}>
<div style={{fontFamily: `${font[1]}`}}>
{font[0]}
</div>
</MenuItem>
)
})}
</Select>
</FormControl>
In this setup, the current font is stored in the state.
--- How I handle a change in selection ---
handleFontChange = (event) => {
this.setState({ font: event.target.value })
};
Although it seems to be almost functional, clicking on the select box shows an empty dropdown despite having valid data in the state:
https://i.sstatic.net/VBNVn.png
What could potentially be causing this issue? Could it be related to how material-ui processes styled text inputs?
Solution Update:
The solution by replacing
<MenuItem key={font} value={font}>with
<MenuItem key={font} value={font[0]}>seems to resolve the display issue but causes confusion with state handling. Attempting to address this through the handle function:
handleFontChange = (event, fontArray, stateData) => {
let newFont = fontArray.filter(i=>{
if(i[0]==event.target.value){
return i
}
})
this.setState({ font: newFont })
};
However, this adjustment still doesn't fully resolve the select box issue. Further refinement may be required for a complete resolution.
Further modifications provided by another solution:
renderValue = (value) => {
return(
<div style={{fontFamily: `${value[1]}`}}>
{value[0]}
</div>
)
}
and
<...>
<Select
value={this.state.font}
renderValue={() => this.renderValue(this.state.font)}
<...>
result in...