React HTML Datalist

React HTML Datalist is a simple component that makes it easier to work with html <datalist> tag in React. The usage of this component is very similar to that of the <select> tag.

What problem does it solve?

Unlike the <select> tag in html, a <datalist> tag does not provide the flexibility to manage different value and text for an <option>.

For example, option for select can be given as: <option value="1">Pizza</option>

but option for datalist is given as: <option value="Pizza" />

Hence, React HTML Datalist makes it easier to manage both text and value for options in datalist.

Installation

It's easy to install react-html-datalist, no extra piece of code is needed. Simply run the command:

npm install react-html-datalist

Usage

To use the react-html-datalist component you can simply import it and pass the related props. Moreover, the component can be used with both class and function components. Refer to the examples below.

Examples

# Function Component

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactHTMLDatalist from "react-html-datalist";

const App = props => {
  const [detail, setDetail] = useState({ food_id: "" });

  const handleChange = e => {
    setDetail({ ...detail, [e.target.name]: e.target.value });
  };

  return (
    <div className="App">
      <h1>React HTML Datalist</h1>
      <p>
        <b>Selected food id:</b> {detail.food_id || "(none)"}
      </p>

      <small>Search or select in the datalist: </small>

      <ReactHTMLDatalist
            name={"food_id"}
            onChange={handleChange}
            classNames={"classone classtwo"}
            options={[
              { text: "Pizza", value: "1" },
              { text: "Burger", value: "2" },
              { text: "Sandwich", value: "3" },
              { text: "French Fries", value: "4" }
            ]}
      />
    </div>
  );
};

export default App;

Try react-html-datalist with function components (hooks) on codesandbox:

# Class Component

import React from "react";
import ReactDOM from "react-dom";
import ReactHTMLDatalist from "react-html-datalist";

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      food_id: ""
    };
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
  
    var { food_id } = this.state;

    return (
      <div className="App">
        <h1>React HTML Datalist</h1>
        <p>
          <b>Selected food id:</b> {food_id || "(none)"}
        </p>

        <small>Search or select in the datalist: </small>

        <ReactHTMLDatalist
              name={"food_id"}
              onChange={this.handleChange}
              classNames={"classone classtwo"}
              options={[
                { text: "Pizza", value: "1" },
                { text: "Burger", value: "2" },
                { text: "Sandwich", value: "3" },
                { text: "French Fries", value: "4" }
              ]}
        />
      </div>
    );
  }
}

export default App;

Try react-html-datalist with class components on codesandbox:

Props

The component can be provided with the following props:

| prop | datatype | example | is required | | ------ | ------ | ------ | ------ | | name | string | "myform" | yes | | classNames | string | "class-one class2" | no | | styles | object | { color: "#0cc" } | no | | onChange | function | handleChange | yes | | options | array | [ { text:"pizza" ,value:1 }, { text: "burger", value: 2 } ] | yes |

Note: The component does not require a value prop. It manages value on it's own via the provided onChange prop.

License

MIT

Enjoy!