Selected option in localstorage

user_18862166 0
Viewed 96

I want the selected option to be stored in localstorage, I track it in another select component and convert the received data and add it to localstorage , but I can’t figure out how to implement select and option. I get the data from GraphQl , so let's assume that the option contains the values "one", "two", "three" Thanks

const Currency_Query = gql`
{
    currencies{
      label
      symbol
    }
  }
  `
  ;

  

class Currency extends Component {
  constructor(props){
    super(props);
    this.state = {
      currencies: [],
    }
  }
    
    componentDidMount = async () =>{
      const response = await client.query({
        query: Currency_Query
      })
      this.setState({
        currencies:response.data.currencies
      })
      
    }
    
    render() {
      return(
        
          <div className={s.select}>
             <select>
            {this.state.currencies.map((currencies) =>(
              
                <option>
                    <div className={s.option} >{currencies.symbol} {currencies.label}
                    </div>                  
                </option>
                )
              ) 
            }
                </select> 
                
                
                
        </div>
            
        );
    }
}

export default Currency;
reactjs javascript
1 Answers

select has value (UPDATED ON SELECTING AN OPTION) option which can have a default. You listen to change of the select value once it changes you store the value to local storage. YOU CANT HAVE ELEMENTS INSIDE OPTION

const Currency_Query = gql`
{
    currencies{
      label
      symbol
    }
  }
  `
  ;

  

class Currency extends Component {
  constructor(props){
    super(props);
    this.state = {
      currencies: [],
    }
  }
    
    componentDidMount = async () =>{
here_set_default_local_Storage_value
      const response = await client.query({
        query: Currency_Query
      })
      this.setState({
        currencies:response.data.currencies
      })
      
    }
    
    render() {
      return(
        
          <div className={s.select}>
             <select
value={choice}
        defaultValue={"here_put_the_localstorage_value"}
        onChange={(e) => setlocalstorage_value_to_e.target.value)}

>

            {this.state.currencies.map((currencies) =>(
              
                <option>
                    <div className={s.option} >{currencies.symbol} {currencies.label}
                    </div>                  
                </option>
                )
              ) 
            }
                </select> 
                
                
                
        </div>
            
        );
    }
}

export default Currency; ```
user_193481520
Related