React Selecto v-1.22.3 default selection of values

[vtoolsMedi]

Environments

• Framework name: React
• Framework version: npm - v: 8.19.3

Description

Hello Everyone! I am using React Selecto in my Project. I have a button which when clicked, some of the options in my list must get selected. My question is, how can I initialize react selecto with already selected elements. I have searched on the Internet enough to say I could not figure out how to do it. Event GPT 3 was not able to help me. Thanks for your help.

[daybrush]

@vtoolsMedi Since target is a DOM, preselection is not supported with props.

Use the .setSelectedTargets method.

It appears to be the same as the next issue.

https://github.com/daybrush/selecto/issues/129

[vtoolsMedi]

Thank you for replying so soon. Would you mind make a little snippet for react? In my project I am not able to preselect items. My code:

class Permissions extends Component {

  constructor(props) {
    super(props);
    this.selectableDragListRef = createRef();
  }

  saveSelectedPermissions(e) {

    let selectedElements = this.selectableDragListRef.current.getData();

    let privileges = {};
    for (let index in this.props.children) {
      let permission = this.props.children[index];

      let found = false;
      for (let elementId in selectedElements) {
        if (permission.props.elementId === elementId) {
          found = true;
        }
      }
      privileges[permission.props.elementId] = {connected: found};
    }
    if (GF.checkNotNull(this.props.onSave)) {
      this.props.onSave(privileges);
    }
  }

  componentDidMount() {
    this.addSelectedItems();
  }

  addSelectedItems() {
    let items = document.getElementById(this.selectableDragListRef.current.getContainerId()).getElementsByClassName('selectoItem');
    items = Array.from(items);
    this.selectableDragListRef.current.setSelectedTargets(items);
  }

  render() {
    let buttonGroup;
    if (this.props.withButtonGroup) {
      buttonGroup = <ButtonGroup color={'dark'} delimiterColor={'primary'} className='my-4'>
        <ButtonSmall color='dark' id={"admin"}>Admin</ButtonSmall>
        <ButtonSmall color='dark' id={"basevariables"}>Standart mit Variablen</ButtonSmall>
        <ButtonSmall color='dark' id={"base"}>Standart ohne Variablen</ButtonSmall>
      </ButtonGroup>;
    } else {
      buttonGroup = <></>;
    }
    let title = 'Berechtigungen';
    if (GF.checkNotNull(this.props.mode) && this.props.mode !== '') {
      switch (this.props.mode) {
        case 'user':
          title = 'Berechtigungen (Benutzer)';
          break;
        case 'userGroup':
        default:
          title = 'Berechtigungen (Benutzergruppe)';
      }
    }
    return (<>
      <VerticalLayout>
        <h2 className='text-cn-color-white'>{title}</h2>
        {buttonGroup}
        <SelectableDragList ref={this.selectableDragListRef}>
          <VerticalLayout>
            <HorizontalLayout className='gap-1 flex-wrap text-cn-color-static-white'>
              {this.props.children}
            </HorizontalLayout>
          </VerticalLayout>
        </SelectableDragList>
      </VerticalLayout>
      <HorizontalLayout className='justify-end gap-x-5 mt-5'>
        <ButtonSmall color='secondary' onClick={(e) => this.saveSelectedPermissions(e)}>Berechtigungen speichern</ButtonSmall>
      </HorizontalLayout>
    </>);
  }
}

Permissions.propTypes = {
  withButtonGroup: PropTypes.bool, onSave: PropTypes.func, mode: PropTypes.string
}
export default Permissions;