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>

Use a Fragment instead of a div for wrapping your options so that it will get stripped out. a div is not a valid child of select. — Brian Thompson
– Brian Thompson, Commented May 29, 2020 at 17:13

SomoKRoceS · Accepted Answer · 2020-05-29 17:19:42Z

2

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>

        )
    }
}

edited May 29, 2020 at 17:19

answered May 29, 2020 at 17:15

SomoKRoceS

3,0733 gold badges24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zhanwen Chen Over a year ago

<option> cannot have children: stackoverflow.com/questions/11237807/…

SomoKRoceS Over a year ago

@ZhanwenChen in this case option doesn't have a children.

Michael Mishin · Accepted Answer · 2020-05-29 17:15:21Z

1

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

Use:

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

answered May 29, 2020 at 17:15

Michael Mishin

5713 silver badges8 bronze badges

Collectives™ on Stack Overflow

React.js: problem with passing variable from select

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related