how can i set object list in default input value

dev

need to set default value like you can see In the image and if a user want to remove default value or select only one he is able to do it right now it's not set to default user need to select that list object one by one but I need to set all value by default it objects list you can see list type is store in object how can I set this all object to by default in the dropdown list after setting by default I set it like this value={listType} but when I try to change it or remove it not changing

const changeList = (e) => {
    console.log("List s is.....", ListS);
    console.log("e here is", e);

    if (e.selected.find(({ value }) => value === "Sanctions")) {
      setListS((prev_state) => ({
        ...prev_state,
        Sanctions: true,
      }));
    } else {
      setListS((prev_state) => ({
        ...prev_state,
        Sanctions: false,
      }));
      setSearchType({ value: "individual", label: "individual" });
    }

    if (e.selected.find(({ value }) => value === "AMS")) {
      setListS((prev_state) => ({
        ...prev_state,
        NNS: true,
      }));
    } else {
      setListS((prev_state) => ({
        ...prev_state,
        NNS: false,
      }));
    }

    if (e.selected.find(({ value }) => value === "PEP")) {
      setListS((prev_state) => ({
        ...prev_state,
        PEP: true,
      }));
    } else {
      setListS((prev_state) => ({
        ...prev_state,
        PEP: false,
      }));
    }
  };
const [ListS, setListS] = useState({
    Sanctions: false,
    NNS: false,
    PEP: false,
  });
 const listType = [
    { value: "Sanctions", label: "Sanctions" },
    { value: "NNS", label: "AMS" },
    { value: "PEP", label: "PEP" },
  ];
              <Select
                options={listType}
                name="sanctionList"
                placeholder="Select"
                isMulti
                styles={{
                  multiValueLabel: (base) => ({
                    ...base,
                    backgroundColor: "#0bb7a7",
                    color: "white",
                    fontSize: "0.8vw",
                    borderRadius: 5,
                  }),
                  control: (data) => ({
                    ...data,
                    fontFamily: "Montserrat",
                    fontSize: "0.8vw",
                    borderColor: "#adadad",
                  }),
                  menu: (data) => ({
                    ...data,
                    fontFamily: "Montserrat",
                    fontSize: "0.8vw",
                  }),
                }}
                  // isDisabled={!ListSel}
                  value={ListS}
                onChange={(e) => changeList({ selected: e })}
                theme={(theme) => ({
                  ...theme,
                  colors: {
                    ...theme.colors,
                    text: "black",
                    primary25: "#d6fdf7",
                    primary: "#0bb7a7",
                    primary50: "#d6fdf7",
                  },
                })}
              ></Select>

Ahmet Emre Kılınç
  1. Since you use different label and value attributes, you need to use getOptionLabel of react-select component to identify the label.
  2. Your values do not include AMS, you need to control NNS instead of AMS in your second if/else of your changeList function.

The following code can be a valid example of setting default values on multi selectable Select component.

    import React, { Component, useState } from 'react';
    import Select from 'react-select';

    const MySelectComponent = () => {

      const [ListS, setListS] = useState({
        Sanctions: true,
        NNS: true,
        PEP: false,
      });

      const listType = [
        { value: "Sanctions", label: "Sanctions" },
        { value: "NNS", label: "AMS" },
        { value: "PEP", label: "PEP" },
      ];

      const changeList = (e) => {
      console.log("List s is.....", ListS);
      console.log("e here is", e);

      if (e.selected.find(({ value }) => value === "Sanctions")) {
        setListS((prev_state) => ({
          ...prev_state,
          Sanctions: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          Sanctions: false,
        }));
        //setSearchType({ value: "individual", label: "individual" });
      }

      if (e.selected.find(({ value }) => value === "NNS")) {
        setListS((prev_state) => ({
          ...prev_state,
          NNS: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          NNS: false,
        }));
      }

      if (e.selected.find(({ value }) => value === "PEP")) {
        setListS((prev_state) => ({
          ...prev_state,
          PEP: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          PEP: false,
        }));
      }
      };
      const selectedValueKeysFiltered = Object.keys(ListS).filter((sv) => {
          return ListS[sv];
      });

      const selectedValue = selectedValueKeysFiltered.map((svk) => {
        return listType.find(lt => lt.value === svk);
      });

      return <Select
        getOptionLabel={option => {return `${option.label}`}}
         options={listType}
         name="sanctionList"
         placeholder="Select"
         isMulti
         styles={{
           multiValueLabel: (base) => ({
             ...base,
             backgroundColor: "#0bb7a7",
             color: "white",
             fontSize: "0.8vw",
             borderRadius: 5,
           }),
           control: (data) => ({
             ...data,
             fontFamily: "Montserrat",
             fontSize: "0.8vw",
             borderColor: "#adadad",
           }),
           menu: (data) => ({
             ...data,
             fontFamily: "Montserrat",
             fontSize: "0.8vw",
           }),
         }}
           // isDisabled={!ListSel}
           value={selectedValue}
         onChange={(e) => changeList({ selected: e })}
         theme={(theme) => ({
           ...theme,
           colors: {
             ...theme.colors,
             text: "black",
             primary25: "#d6fdf7",
             primary: "#0bb7a7",
             primary50: "#d6fdf7",
           },
         })}
       ></Select>;
    };

    export default MySelectComponent;

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

How can I set the default date in input portion?

PHP: How can I set a default value for $_POST array?

How can I set a default for column B to be the value in column A in PostgreSQL?

How can I set/provide a default value while django migration?

How to set default value in materialize autocomplete input?

How can I set an object to a constant and display the value in react?

How can I set default transparency on CMD?

How can i use value from input to console.log a value from an object?

How can I set a default variable value before select action in JavaScript

flutter In dropdownButton how can I assign the first value of list to be selected by default

How can I put value of input in localStorage

How can I delete integers from list (of integers and strings) by taking which value to delete from user input?

How can i set value to dropdown in flutter?

How can I return an object with a list inside of it?

How can I filter the object in the List with Mongoose?

How can I access a value in an object in javascript?

How can I find a specific value in an object?

How do I set a default value for a parameter in Rails?

Set default value for select input in php

Formtastic/ActiveAdmin set a default value for a select input

How can I set a default zoom in a matplotlib figure?

How to set value in Object

How can I parse String to int with the default value?

How can I get default value for threshold with constructor in C#?

How to set default value in function

How to set default value for variable?

How can I set node and link text manually in separated input?

How can I set the height of my input field?

How can I match on value and then add value to object?

TOP lista

  1. 1

    R Shiny: use HTML em funções (como textInput, checkboxGroupInput)

  2. 2

    O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo

  3. 3

    Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

  4. 4

    R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados

  5. 5

    Gerenciar recurso shake de Windows Aero com barra de título personalizado

  6. 6

    Como obter dados API adequados para o aplicativo angular?

  7. 7

    UITextView não está exibindo texto longo

  8. 8

    Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

  9. 9

    Acessando relatório de campanhas na AdMob usando a API do Adsense

  10. 10

    Usando o plug-in Platform.js do Google

  11. 11

    Como posso modificar esse algoritmo de linha de visada para aceitar raios que passam pelos cantos?

  12. 12

    Dependência circular de diálogo personalizado

  13. 13

    Coloque uma caixa de texto HTML em uma imagem em uma posição fixa para site para desktop e celular

  14. 14

    iOS: como adicionar sombra projetada e sombra de traço no UIView?

  15. 15

    Como usar a caixa de diálogo de seleção de nomes com VBA para enviar e-mail para mais de um destinatário?

  16. 16

    Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante

  17. 17

    How to create dynamic navigation menu select from database using Codeigniter?

  18. 18

    Converter valores de linha SQL em colunas

  19. 19

    ChartJS, várias linhas no rótulo do gráfico de barras

  20. 20

    用@StyleableRes注释的getStyledAttributes。禁止警告

  21. 21

    não é possível adicionar dependência para com.google.android.gms.tasks.OnSuccessListener

quentelabel

Arquivo