Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Help needed to connect multi-select frontend code to Sanity.io backend

6 replies
Last updated: Aug 15, 2022
ā€¼ļø!!!!! It's an Emergency question!!!šŸ˜…
Hi guys.
I want to have a multi select option that user fill it when they want to upload a post to set the category of their post.
this is how it looks like in frontend:
and this is my frontend code for seting the category

const optionList = [
  { value: 'Garden', label: 'Garden' },
  { value: 'Living room', label: 'Living room' },
  { value: 'Bedroom', label: 'Bedroom' },
  { value: 'Kitchen', label: 'Kitchen' },
  { value: 'Office', label: 'Office' },
  { value: 'Table', label: 'Table' },
  { value: 'Desk', label: 'Desk' },
  { value: 'Chair', label: 'Chaie' },
  { value: 'Sofa', label: 'Sofa' },
  { value: 'Decorative', label: 'Decorative' },
  { value:'Flower', label: 'Flower' },
  { value: 'Patine', label: 'Patine' },
  { value: 'White', label: 'White' },
  { value: 'Red', label: 'Red' },
  { value: 'Blue', label: 'Blue' },
  { value: 'Green', label: 'Green' },
  { value: 'Yellow', label: 'Yellow' },
  { value: 'Other', label: 'Other' },
];

const [inputValue, setInputValue] = useState('');
const [selectedValues, setselectedValues] = useState({ selected: [] });

const [selection, setSelection] = useState(optionList);

const handleInputChange = (value) => {
  setInputValue(value);
};

const handleOnChange = (e) => {
  const newOption = { label: inputValue, inputValue };

  inputValue !== '' && setSelection([...selection, newOption]);

  setInputValue('');
  console.log(e);
  setselectedValues(selection);
  setCategory(e);
  
};
and this is in my return field

<div>
      <CreatableSelect
        options={selection}
        isMulti
        onChange={handleOnChange}
        onInputChange={handleInputChange}
        inputValue={inputValue}
        value={selectedValues.selected}
        controlShouldRenderValue={true}
      />
    </div>
I also create a category field in my sanity and this is it:

{
            title: 'Categories',
            name: 'categories',
            type: 'array',
            of: [{ type: 'string' }],
            options: {
                layout: 'tags'
            }
        },
the fron part is okay and I can upload a file with multi category but in the sanity part I have a problem and that is it:
the category oart is still empty and I got some arror about that.
thanks for your help
Aug 12, 2022, 3:33 PM
I think the problem is that the frontend and database of sanity are not connected but I don't know how to connect them or write any query for them
Aug 12, 2022, 3:52 PM
It looks like the issue is that you're setting an object (with 
value
and 
label
) to that field. You should just be able to assign the string 
value
to get it to work.
Aug 12, 2022, 6:10 PM
user M
thank you I change my front code and setting object with string but still have an erroe in my sanity pertwhat should I do?

const [inputValue, setInputValue] = useState('');
const [selectedValues, setselectedValues] = useState({ selected: [] });

const [selection, setSelection] = useState(optionList);

const handleInputChange = (value) => {
  setInputValue(value);
};

const handleOnChange = (e) => {
  const newOption = { label: inputValue, inputValue };

  inputValue !== '' && setSelection([...selection, newOption]);
const meqdar = e.map((item) => item.value);
  setInputValue('');
  console.log(meqdar);
  console.log(selection)
  setselectedValues(selection);
  setCategory(meqdar);
  
};


  <div>
      <CreatableSelect
        options={selection}
        isMulti
        onChange={handleOnChange}
        onInputChange={handleInputChange}
        inputValue={inputValue}
        value={selectedValues.selected}
        controlShouldRenderValue={true}
      />
    </div>
Aug 13, 2022, 2:01 PM
Isn't it becouse of the typy of the category in the code above? Is that ok?
Aug 13, 2022, 2:03 PM
user M
Thank you.I change my frontend code and setting the values as string but I thing the type that I set for category in a sanity in not correct. can you check that and tell me what type should I set for category?
this is my current code and error:

const [inputValue, setInputValue] = useState('');
const [selectedValues, setselectedValues] = useState({ selected: [] });

const [selection, setSelection] = useState(optionList);

const handleInputChange = (value) => {
  setInputValue(value);
};

const handleOnChange = (e) => {
  const newOption = { label: inputValue, inputValue };

  inputValue !== '' && setSelection([...selection, newOption]);
const meqdar = e.map((item) => item.value);

  setInputValue('');
  console.log(meqdar.toString());
  console.log(selection)
  setselectedValues(selection);
  setCategory(meqdar.toString());
  
};

<div>
      <CreatableSelect
        options={selection}
        isMulti
        onChange={handleOnChange}
        onInputChange={handleInputChange}
        inputValue={inputValue}
        value={selectedValues.selected}
        controlShouldRenderValue={true}
      />
    </div>

 {
            title: 'Categories',
            name: 'categories',
            type: 'array',
            of: [{ type: 'string' }],
            options: {
                layout: 'tags'
            }
        },
Aug 13, 2022, 3:15 PM
It looks like you're setting 
category
while your fields is called 
categories
šŸ™‚
Aug 15, 2022, 4:44 PM

Sanityā€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?