onboarding.js

import React, { Component } from 'react'
import { Redirect, Link } from "react-router-dom";
import PassingGrade from "../../../Services/PassingGrade";

function ListUniversity (props) {
        var obj = props.listUniversity;
        // console.log(obj);
        if (obj.status != 'success') {
            return (
                <option value="error">Error</option>
            );
        } else {
            return (
                <React.Fragment>
                    {obj.results.map((result) => <option value={result.id}>{result.name}</option>)}
                </React.Fragment>
            );
        }
}
function ListDepartment(props) {
    if(props.id_university!=null){
        PassingGrade.listDepartment(props.id_university).then(function(res){
            var obj=res.data
            console.log(obj);
        });
    }
    return(
        <option value="12">OY</option>
    );
}
function ListDepartment2(props) {
    if(props.id_university!=null){
        PassingGrade.listDepartment(props.id_university).then(function(res){
            var obj=res.data
            console.log(obj);
        });
    }
    return(
        <option value="12">OY</option>
    );
}
class Tryout extends Component {
    constructor(props) {
        super(props);
        this.state = {
            redirect: false,
            listUniversity: [],
            id_univ1: null,
            id_univ2: null
        }
        this.onUniv1Change=this.onUniv1Change.bind(this);
        this.onUniv2Change=this.onUniv2Change.bind(this);

    }
    
    componentDidMount() {
        PassingGrade.listUniversity().then(res => this.setState({ listUniversity: res.data }))
        try {
            let id_tryout = this.props.location.state.id_tryout;
            console.log(id_tryout);
        } catch (e) {
            this.setState({ redirect: true })
        }
        // console.log(this.props.location.state.id_tryout)
    }

    onUniv1Change(e){
        e.preventDefault();
        let id_univ1=e.target.value;
        this.setState({id_univ1})
    }
    onUniv2Change(e){
        e.preventDefault();
        let id_univ2=e.target.value;
        this.setState({id_univ2})
    }
    render() {
        if (this.state.redirect) {
            return <Redirect to="/dashboard" />
        } else {
            return (
                <div class="container">
                    <div class="row">
                        <div class="col-md-8">
                            <Link to="/dashboard" class="text-black">
                                <i class="fa fa-long-arrow-left mr-2 text-primary mb-2" aria-hidden="true"></i> Kembali Ke Beranda
                            </Link>
                            <div class="card mt-3">
                                <div class="block-logo">
                                    {/* <img src={window.location.origin + '/assets/images/logo.png'} class="img-fluid" alt="" /> */}
                                </div>

                                <div class="">
                                    <h4>Petunjuk Umum</h4>
                                    <p>Berikut petunjuk umum yang perlu diperhatikan untuk tryout di pejuangnegeri</p>
                                    <p>
                                        Peraturan pertama adalah
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <Link to="/dashboard" class="text-black">
                                <i class="fa fa-long-arrow-left mr-2 text-primary mb-2" aria-hidden="true"></i>
                            </Link>
                            <div class="card mt-3">
                                <div class="block-logo">
                                    <img src={window.location.origin + '/assets/images/logo.png'} class="img-fluid" alt="" />
                                </div>

                                <div class="mt-3">
                                    <h4>Daftar Tryout</h4>
                                    <p>Silakan lengkapi data persiapan tryout dibawah ini</p>
                                </div>

                                <hr />

                                <div class="block-form">
                                    <form>
                                        <div class="form-group">
                                            <label for="">Pilih Universitas 1</label>
                                            <select name="univ_1" class="form-control" onChange={this.onUniv1Change}>
                                                <option value="">Pilih Universitas</option>
                                                <ListUniversity listUniversity={this.state.listUniversity}/>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="">Pilih Jurusan 1</label>
                                            <select name="major_1" class="form-control">
                                                <option value="">Pilih Jurusan</option>
                                                <ListDepartment id_university={this.state.id_univ1}/>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="">Pilih Universitas 2</label>
                                            <select name="univ_2" class="form-control" onChange={this.onUniv2Change}>
                                                <option value="">Pilih Universitas</option>
                                                <ListUniversity listUniversity={this.state.listUniversity}/>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="">Pilih Jurusan 2</label>
                                            <select name="major_2" class="form-control">
                                                <option value="">Pilih Jurusan</option>
                                                <ListDepartment2 id_university={this.state.id_univ2} />
                                            </select>
                                        </div>
                                        <input type="submit" class="btn btn-primary w-100 mt-3" value="Mulai Tryout" />
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }
}

export default Tryout;