React.js: problem with passing variable from select

Question

In GetTariffs.js file, I get the tariff values from the GET-request. In the AddForm.js file there is a POST-request for sending data. There was a problem with the transfer of values from the GET-request (drop-down list) from GetTariffs.js file to AddForm.js file.

The values in the drop-down list are not displayed on the page: But in the source code values are present:

GetTariffs.js:

import React, { Component } from 'react'

class GetTariffs extends Component {

    constructor(props) {
        super(props);
        this.state = {
            tariffs: [],
            isLoaded: false,
        }
    }

    componentDidMount() {
        fetch('/api/v1/tariff/all')
            .then(res => res.json())
            .then(json => {
                this.setState({
                    isLoaded: true,
                    tariffs: json,
                })
            })
    }

    render() {

        var {isLoaded, tariffs} = this.state;

        if (!isLoaded) {
            return <div>loading</div>
        }

        else {
            return (

                <div>
                    {tariffs.map(tariff => {
                        return <option name="tariff" key={tariff.id} value={tariff.name}>
                            {tariff.name}
                        </option>
                    })}
                </div>

            )
        }
    }
}

export default GetTariffs

AddForm.js:

...
import GetTariffs from "./GetTariffs";
...
                <form onSubmit={this.submitHandler}>
...
                    <div className="form-container">
                        <h5>Тариф</h5>
                        <div className="form-row">
                            <div className="form-group col-md-12">
                                <select id="inputState" className="form-control" onChange={this.changeGetTariffHandler}>
                                    <GetTariffs/>
                                </select>
                            </div>
                        </div>
                    </div>

Answer 1

I think it is because the options are bounded by div. You want the options to be the children of the select tag.

Try bound the options with React.Fragment instead of bounding the options in div. React Fragment exists exactly for situations like these :)

React Fragment

The render should look something like that:

render() {

    var {isLoaded, tariffs} = this.state;

    if (!isLoaded) {
        return <div>loading</div>
    }

    else {
        return (

            <React.Fragment>
                {tariffs.map(tariff => {
                    return <option name="tariff" key={tariff.id} value={tariff.name}>
                        {tariff.name}
                    </option>
                })}
            </React.Fragment>

        )
    }
}

Answer 2

Они не отображаются, потому что ты обернул их в div. They don’t appear because you wrapped them in div.

Use:

 <>
   <option></option>
   <option></option>
 </>