how can we select multi select from drop down in antd

Question

I have two select dropdowns in my code. One is the teachers list and another dropdown is course list. It has to act multi selection . Here statically I set courses for individual teachers.if i will click any one teacher, that teacher related course should be display.same way i have one common course list are there. I should be display course list also. If any course will exist while clicking on teacher, I am not suppose to display that course in course list.

import React from 'react'
import ReactDOM from 'react-dom'
import { Select, Button } from 'antd';

const  Option =Select.Option

const teacherInfo=['Vikram','Ramesh']

const courseInfo = ['CULT1A','CULT1B','CULT1C','CULT1D','CULT1E','CULT1F','HINDI1A','HINDI1B',
'HINDI1C','HINDI1D','HINDI1E','HINDI1F'];

const teacherCourseData={
    Vikram:['CULT1A','CULT1B','CULT1C','HINDI1A','HINDI1B'],
    Ramesh:['CULT1D','CULT1E','HINDI1E','HINDI1F']
}

class TeacherCourse extends React.Component{

    state={
        selectTeacherValue:teacherCourseData[teacherInfo[0]],
        selectCourseValue:teacherCourseData[teacherInfo[0]][0],
    }
    handleTeacherChange=
        (value)=>{
            this.selectTeacherValue=teacherCourseData[value]
            this.selectCourseValue=teacherCourseData[value][0]
          console.log(this.selectTeacherValue)
            }
    handleCourseChange=
    (value)=>{
        this.selectCourseValue=value

        console.log(this.selectCourseValue)

    }
    handleClick=()=>{
        console.log(this.selectCourseValue)
        console.log(this.selectTeacherValue)
        if(this.selectCourseValue === undefined || this.selectTeacherValue === undefined)
        {
            console.log("please select")
            return;
        }
        else{
            console.log("Sucessfully updated")
        }
    }

    render()
    {
        const {selectCourseValue,selectTeacherValue}=this.state
        {/*const filteredCourseOptions = courseInfo.filter(o => !selectCourseValue.includes(o));*/}
        return(
            <div align="center">
            <h2>Shishu Bharathi</h2>

            <label>Teacher List :</label>
            &nbsp;

                <Select defaultValue="Select" style={{ width: 120 }} 
                  onChange={this.handleTeacherChange}>
                  {teacherInfo.map(teacher=>(
                      <Option key={teacher}>{teacher}</Option>
                  ))}

                </Select>
                &nbsp;  &nbsp;


                <label>Course List :</label>
            &nbsp;
            <Select
          mode="multiple"
          placeholder="Please select"         
          onChange={this.handleCourseChange}
          style={{ width: 350 }}
        >
        {
            selectTeacherValue.map(course=>(    
                <Option key={course} >{course}</Option>
            )
           )
          }
        </Select>
                <br></br> 
                <br></br>                

                <Button onClick={this.handleClick}>Update</Button>        
            </div>
        )
    }
}

export default TeacherCourse

Answer 1

You're quite close, but is seems like you're missing the setState function from react. Eg.

handleCourseChange = (value) => {
    this.selectCourseValue = value
    console.log(this.selectCourseValue)
}

would become

handleCourseChange = (value) => {
    this.setState({ selectCourseValue: value })
    console.log(this.state.selectCourseValue)
}

For more info on setState, have a look at the official react documentation: https://reactjs.org/docs/react-component.html#setstate