List Editor View Source



The List Editor component allows the user to add to, delete from, and reorder a list of strings.



Imports


Import React and the ListEditor Component.


0
import * as React from "react";
1
import { ListEditor } from "slate-react-system";


List Editor


Chocolate
Vanilla
Mint Chip
Pistachio
Neapolitan
Toffee
Rocky Road

Define the List Editor component.

0
class ExampleOne extends React.Component {
1
  state = {
2
    flavors: [
3
      "Chocolate",
4
      "Vanilla",
5
      "Mint Chip",
6
      "Pistachio",
7
      "Neapolitan",
8
      "Toffee",
9
      "Rocky Road",
10
    ],
11
  };
12
13
  _handleChange = (e) => {
14
    this.setState({ [e.target.name]: e.target.value });
15
  };
16
17
  render() {
18
    return (
19
      <ListEditor
20
        placeholder="Add a flavor"
21
        name="flavors"
22
        options={this.state.flavors}
23
        onChange={this._handleChange}
24
      />
25
    );
26
  }
27
}



Accepted React Properties


List Editor
NameTypeDefaultDescription
onChange
function
null
Function called upon an onChange event
options
Array
null
Values to choose from and reorder. Can be used to specify the default value. An array of strings.
name
string
null
Input name
label
string
null
Label text
description
string
null
Description text
tooltip
string
null
Tooltip text


ComponentsAvatar GroupButtonsCard Tabs3D CardCheckboxesColorsDropdownsHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source