Get help on Discord

How to save multi-select category array from frontend to Sanity schema?

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
AI Update

Looking at your code, the issue is that you're defining the categories field in your Sanity schema correctly, but you need to make sure you're actually sending the category data in the right format when you create/upload the document to Sanity.

Your Sanity schema looks good:

{
  title: 'Categories',
  name: 'categories',
  type: 'array',
  of: [{ type: 'string' }],
  options: {
    layout: 'tags'
  }
}

The problem is in how you're handling the data from CreatableSelect. When you call setCategory(e), the e parameter contains an array of option objects like [{value: 'Garden', label: 'Garden'}, {value: 'Kitchen', label: 'Kitchen'}], but Sanity expects just an array of strings like ['Garden', 'Kitchen'].

Fix your handleOnChange function:

const handleOnChange = (e) => {
  // e is an array of option objects like [{value: 'Garden', label: 'Garden'}, ...]
  // Extract just the values for Sanity
  const categoryValues = e ? e.map(option => option.value) : [];
  
  setCategory(categoryValues); // This should be ['Garden', 'Kitchen'] - array of strings
  setselectedValues({ selected: e }); // Keep the full objects for the UI display
};

When you submit to Sanity, make sure your mutation looks like:

// When creating/patching the document
const doc = {
  _type: 'yourDocumentType',
  // ... other fields
  categories: category, // This should be ['Garden', 'Kitchen', 'Red'] - just strings
};

// Using the Sanity client
client.create(doc)
  .then(response => {
    console.log('Document created:', response);
  })
  .catch(err => {
    console.error('Upload failed:', err.message);
  });

The key issue is that CreatableSelect passes the entire option objects in the onChange event, but Sanity's array of strings expects just the string values. By using .map(option => option.value), you extract just the values.

If you're still getting errors, check your browser console for the specific error message - it will tell you exactly what Sanity is receiving vs what it expects. Also make sure your Sanity client is properly configured with your project ID and dataset.

Show original thread
6 replies
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
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.
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>
Isn't it becouse of the typy of the category in the code above? Is that ok?
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'
            }
        },
It looks like you're setting 
category
while your fields is called 
categories
🙂

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?