Чтобы при загрузке страницы был выбран сохраненный вариант из списка option, нужно чтобы у нужного варианта был атрибут selected. Пример:
<select name="nm" id="nam">
<option value="QBC">QBC</option>
<option value="QEF">QEF</option>
<option value="GHI" selected>GHI</option> <!-- этот вариант будет выбран-->
<option value="KLM">KLM</option>
</select>
значит вам нужно в каждом option выводить переменную вместо selected, которая будет либо пустая, либо равна selected (если сохраненное состояние равно выводимому option).
Добавил рабочий пример, где всё работает (проверял)
Пример на функциональных компонентах
import React, { useState, useEffect } from 'react'
const LocalStorage = () => {
const date = [
{ symbol: 'RU', label: 'рубль' },
{ symbol: 'USD', label: 'доллар' },
{ symbol: 'EUR', label: 'евро' }
]
const [curr, setCurrencies] = useState(date)
const [currentSymbol, setCurrentSymbol] = useState("EUR") // опция выбранная по умолчанию (если нет данных в localstorage)
// срабатывает один раз при загрузке компонента
useEffect(() => {
if(localStorage.getItem('symbol')) {
const item = localStorage.getItem('symbol')
setCurrentSymbol(item)
}
}, [])
// обработчик - срабатывает при выборе опции списка
const selectHandler = (e) => {
localStorage.setItem('symbol', e.target.value)
setCurrentSymbol(e.target.value)
}
return (
<div>
<select onChange={selectHandler} value={currentSymbol}>
{
curr.map(currencies => (
<option key={currencies.symbol} value={currencies.symbol}>
{currencies.symbol} {currencies.label}
</option>
)
)
}
</select>
</div>
)
}
export default LocalStorage
на классовых
import React, { Component } from 'react'
class ClassLocal extends Component {
constructor(props){
super(props);
this.state = {
curr: [
{ symbol: "RU", label: "рубль" },
{ symbol: "USD", label: "доллар" },
{ symbol: "EUR", label: "евро" }
],
currentSymbol: "EUR"
}
}
componentDidMount() {
if(localStorage.getItem('symbol')) {
const item = localStorage.getItem('symbol');
this.setState({currentSymbol: item})
}
}
selectHandler = (e) => {
localStorage.setItem('symbol', e.target.value)
this.setState({currentSymbol: e.target.value})
}
render() {
return (
<div>
<select onChange={this.selectHandler} value={this.state.currentSymbol}>
{
this.state.curr.map(currencies => (
<option key={currencies.symbol} value={currencies.symbol}>
{currencies.symbol} {currencies.label}
</option>
)
)
}
</select>
</div>
)
}
}
export default ClassLocal
