Как достать значение из стейта и помеcтить в select-option?

Question

import React from 'react';
import style from './contact.module.css'
import {baseUrl} from "../utils/Constants";

class Contact extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            planetsName: ''
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(event) {
        this.setState({planetsName: event.target.value});
    }

    componentDidMount() {
        const expiryDate = localStorage.getItem('planetsNameExpiryDate');
        const planetsNameStr = localStorage.getItem('planetsName');
        if (
            expiryDate && planetsNameStr &&
            !parseInt(expiryDate, 10) &&
            parseInt(expiryDate, 10) > Date.now()
        ) {
            try {
                this.setState({
                    planetsName: JSON.parse(planetsNameStr),
                });
                return;
            } catch (e) {
                console.log('json parsing error');
            }
        }




        return fetch(`${baseUrl}/v1/planets/`)
            .then(data => data.json())
            .then(data => data.map(planet => planet.name))
            .then(planet =>  {
                this.setState({
                    planetsName: planet
                })

                localStorage.setItem('planetsName', JSON.stringify(planet));

                localStorage.setItem(
                    'personInfoExpiryDate',
                    (Date.now() + 30 * 24 * 60 * 60 * 1000).toString()
                );
        });
    }


    render() {
        return (
            <div className="container">
                <form>            
                    <label htmlFor="planet">Planet</label>
                    <select id="planet" name="planet" multiple={true} value={this.state.planetsName} onChange={this.handleChange}>
                        <option value={this.state.value}>Planet</option>
                    </select>                                 
                </form>
            </div>
        )
    }
}
export default Contact;

Answer 1

let root = document.getElementById('root')

class App extends React.Component{
    constructor(props){
        super(props)
        this.state = {
          planetsName: ['Меркурий', 'Венера', 'Земля', 'Марс']
        }
    }

    render() {
        return (
            <div className="container">
                <form>
                    <label htmlFor="planet">Planet</label>
                    <select id="planet" name="planet" multiple={true}>
                        {this.state.planetsName.map((name)=><option>{name}</option>)}
                    </select>
                </form>
            </div>
        )
    }
}
  

ReactDOM.render(<App />, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

БЛОГ НА HUSL

Как достать значение из стейта и помеcтить в select-option?

Ответы (1 шт):