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
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source