CODEWITHSUNDEEP
reactjsfrontendantd
danedelions_swift
danedelions_swift

Reputation: 125

REACTJS and ANTD: How to change form contents through <Select> option?

I am new to React and am currently using AntD in my ReactJS code. In my code, I have a select option that is supposed to change the form elements depending on what kind of form it is.

Here is my select: 

<Form.Item label="Inquiry Type">
    <Select>
       <Option>
           form 1
       </Option>
       <Option>
           form 2
       </Option>
       <Option>
           form 3
       </Option>
    </Select>
</Form.Item>

So what should happen is that when I choose Form 1, it should be able to show me all the contents of Form 1, and the same thing for Forms 2 and 3.

I am unsure about how to do this. I have read other questions but they do not answer mine.

Upvotes: 1

Views: 503

Answers (1)

Ken Labso
Ken Labso

Reputation: 911

Check this.

state = {
  selectedForm: "form1"
};
changeForm = value => {
  this.setState({
    selectedForm: value
  });
};
render() {
  const { selectedForm } = this.state;
  return (
    <div>
      <Select value={selectedForm} onChange={value => this.changeForm(value)}>
        <Option value="form1">form 1</Option>
        <Option value="form2">form 2</Option>
        <Option value="form3">form 3</Option>
      </Select>
      {selectedForm === "form1" ? (
        <Form1 />
      ) : selectedForm === "form2" ? (
        <Form2 />
      ) : selectedForm === "form3" ? (
        <Form3 />
      ) : ""}
    </div>
  );
}

Upvotes: 2

Related Questions