ساخت فرم پیشرفته در ریکت

سادس داخل تگ select باید با map مقادیری که از نت گرفتید رو لیست کنید

<select>
  {yourData.map(data => <option key={data.id} value={data.value}>{data.text}</option>)}
</select>

نشد کدتونم بذارید تا بهتر بشه مشکلو پیدا کرد

@aaslani
ممنون از راهنمایی
با راهنمایی شما اوکی شد اما مشکل دیگه که هستش
من با انتحاب شدن id و ارسال به سرور مشکل دارم چون من یک فیلد نام دارم دو تا فیلد Dropdown.
در فیلد اول نام وارد میشه (text)
در فیلد دوم نامی انتخاب میشه (dropdown)
در فیلد سوم فیلدهایی در dropdown تیک زده میشه (dropdown) و بعد ارسال میشه به سرور
اما مشکل دارم که چطور id دو تا dropdown ؤا بفرستم به سرور و همینطور در dropwdown دوم لیست از id که تیک زده شده بفرستم به سرور

import React, { Component } from 'react';
import validator from 'validator';
import axios from 'axios';

class TransportAdd extends Component {

    constructor(props){
            super(props);

            this.state = {
                isLoading: true,
                fields : {
                    name : ''
                },
                drivers: [],
                students:[],
                errors : {

                }
            }

    }

    componentDidMount(){
        this.fetchDriverData();
        this.fetchStudentData();
    }

    fetchDriverData(){
        let officerID = localStorage.getItem('officer_id');     

        fetch(`http://localhost:4040/officer/${officerID}/driver`)
            .then(response => {
                return response.json();
            })
            .then(initialDrivers => initialDrivers.map(driver => {
                return driver;
            }))
            .then(drivers =>{
                    this.setState({                                  
                        drivers                     
                    })
                }               
            ) 
            .catch(error => {
                console.log('parsing failed...' + error);
        });        
    }

    fetchStudentData(){
        let officerID = localStorage.getItem('officer_id');     

        fetch(`http://localhost:4040/officer/${officerID}/students`)
            .then(response => {
                return response.json();
            })
            .then(initialStudents => initialStudents.map(student => {
                return student;
            }))
            .then(students =>{
                    this.setState({                                  
                        students                        
                    })
                }               
            ) 
            .catch(error => {
                console.log('parsing failed...' + error);
        });        
    }

    handleValidation(callback) {
        let { fields } = this.state;
        let errors = {};
        let formIsValid = true;

        //username
        if(validator.isEmpty(fields.name)){
                formIsValid = false;
                errors['name'] = "نام راننده خالی است";
        } else if(! validator.isLength(fields.name , { min : 3 , max : 20})) {
                formIsValid = false;
                errors['name'] = "فرمت نام راننده اشتباه است";
        }

        this.setState({ errors },() => {
                return callback(formIsValid)
        });

    }

    handleChange(event) {
        let fields = this.state.fields;
        let target = event.target;
        fields[target.name] = target.value;
        this.setState({fields});
    }

    handleRequest(){
        const { name } = this.state.fields;         
        const { drivers } = this.state;
        const { students } = this.state;
        // debugger;
        let officerID = localStorage.getItem('officer_id');

        axios({
            method : 'post',
            url:`http://localhost:4040/officer/${officerID}/transport`,
            data: {
                name,
                drivers,
                students
            },
            config:{ headers : {'Accept': 'application/json','Content-Type':'application/json'}}
        })
        .then(response => {
            console.log('success');
            this.props.history.push(`/transport`);
        })
        .catch(error => {
            console.log(error);

        })
    }        

    handleSubmit(event) {
        event.preventDefault();

        this.handleValidation((valid) => {
            if(valid) this.handleRequest()
        })
    }

    render() {
            const { name } = this.state.fields;
            const { drivers,students } = this.state;
            const { errors } = this.state;

            console.log(drivers);
            return (
                    <div>
                        <div className="content-wrapper">
                                <h4>ایجاد سرویس</h4>
                                <hr/>

                                <form onSubmit={this.handleSubmit.bind(this)}>
                                        <div className="col-md-3">
                                                <div className="form-group">
                                                    <label>نام سرویس:</label>
                                                    <input
                                                        type="text"
                                                        className={["form-control" , errors["name"] ? 'is-invalid' : ''].join(' ')}
                                                        name="name"
                                                        value={name}
                                                        onChange={this.handleChange.bind(this)}
                                                        placeholder=" نام سرویس را وارد نمایید"/>

                                                    <span className="invalid-feedback rtl" style={{ display : errors["name"] ? 'block' : 'none'}}>{errors["name"]}</span>
                                                </div>
                                                <div className="form-group">
                                                    <label>انتخاب راننده:</label>
                                                    <select className="form-control">
                                                        {                                                                   
                                                            drivers.map(drive => <option key={drive._id} value={drive._id}>{drive.firstname} {drive.lastname}</option>)
                                                        }
                                                    </select>
                                                </div>
                                                <div className="form-group">
                                                    <label>انتخاب دانش آموز:</label>
                                                    <select className="form-control">
                                                        {                                                                   
                                                            students.map(student => <option key={student._id} value={student._id}>{student.firstname} {student.lastname}</option>)
                                                        }
                                                    </select>
                                                </div>
                                                <div className="form-group">
                                                    <button className="btn btn-outline-primary btn-sm" type="submit">ذخیره سرویس</button>
                                                </div>

                                        </div>
                                </form>

                        </div>
                    </div>
            );
    }
}

export default TransportAdd;