CODEWITHSUNDEEP
reactjsreact-nativereduxreact-hooks
Manish Rana
Manish Rana

Reputation: 41

React Autocomplete to hold value

I want to use Autocomplete in a react form, and it should be able to choose multiple values. After submitting the form, when I click on edit button the values that I submitted should be displayed there in Autocomplete component. This should work for different users based on their name.

How can I do that?

Upvotes: 0

Views: 112

Answers (1)

Rajan Mishra
Rajan Mishra

Reputation: 43

React multi select component is available in almost all the modern React UI component libraries. You can select multiple values and get the selected values whenever you want to process them.

  1. You can do it with the help of npmjs libraries

https://www.npmjs.com/package/react-multi-select-component

https://www.npmjs.com/package/multiselect-react-dropdown

  1. You can use any of the UI component libraries

https://mdbootstrap.com/docs/react/forms/multiselect/

https://material-ui.com/components/selects/#multiple-select

import React, { Component } from "react";
import { MDBSelect } from "mdbreact";

class SelectPage extends Component {
  state = {
    options: [
      {
        text: "Option 1",
        value: "1"
      },
      {
        text: "Option 2",
        value: "2"
      },
      {
        text: "Option 3",
        value: "3"
      },
      {
        text: "Option 4",
        value: "4"
      },
      {
        text: "Option 5",
        value: "5"
      }
    ]
  };

  render() {
    return (
      <div>
        <MDBSelect
          multiple
          options={this.state.options}
          selected="Choose your option"
          selectAll
        />
      </div>
    );
  }
}

export default SelectPage;

Let me know if this helps!

Upvotes: 1

Related Questions