title: Enter an object and send it to the backend
body: <p>I have an ECommerce project and this project contains an interface for creating a product, and an interface for creating a product that contains several fields</p>
  <p>And these are the fields as they appear in the backend:</p>
  <pre><code>mutation{
    createProduct(createProductInput: {
      En:{
        title: &quot;New Product&quot;
        description: &quot;Adding a new Product just for testing&quot;
        tags: [&quot;جديد&quot; ,&quot;اختبار&quot;]
      }
  
      category: &quot;62b2aef01ae9cf195d385bec&quot;
      collection: &quot;62b2af1a2705c43f5cb64acb&quot;
      brand: &quot;628f20060538cc5b9f58daf5&quot;
     }
  }
  </code></pre>
  <p>And as it is clear in the back-end request that there is an Object and there are three fields inside it, title, description, tags &quot;array of strings&quot;</p>
  <p>My problem is that I didn't know how to enter the object and the array &quot;Tags&quot;</p>
  <pre><code>import { React, useState } from &quot;react&quot;;
  import {
    Col,
    Button,
    Form,
    FormGroup,
    Label,
    Input,
    FormText,
    Card,
    CardImg,
  } from &quot;reactstrap&quot;;
  import { useCategories } from &quot;../../../../hooks/useCategories&quot;;
  import { useCollections } from &quot;../../../../hooks/useCollections&quot;;
  import { useBrand } from &quot;../../../../hooks/useBrand&quot;;
  import Select from &quot;react-select&quot;;
  
  const AddProduct = () =&gt; {
    const categories = useCategories();
    const collections = useCollections();
    const brands = useBrand();
  
    const categoriesOptions = categories?.data?.categories;
    const collectionsOptions = collections?.data?.collections;
    const brandsOptions = brands?.data?.brands;
  
    const [category, setCategory] = useState(0);
    const [collection, setCollection] = useState(0);
    const [brand, setBrand] = useState(0);
  
    return (
      &lt;Card
        style={{
          boxShadow: &quot;1px 1px 10px 1px #888888&quot;,
          borderRadius: &quot;3rem&quot;,
          margin: &quot;5rem&quot;,
          padding: &quot;4rem&quot;,
        }}
      &gt;
        &lt;Form&gt;
          &lt;h3 style={{ color: &quot;black&quot;, fontWeight: &quot;bold&quot; }}&gt;Add Product&lt;/h3&gt;
  
          &lt;div col&gt;
            &lt;img
              width=&quot;30%&quot;
              height=&quot;40%&quot;
              style={{
                paddingTop: &quot;3rem&quot;,
                paddingBottom: &quot;3rem&quot;,
                paddingRight: &quot;3rem&quot;,
              }}
              src=&quot;https://themes.pixelstrap.com/multikart/back-end/assets/images/pro3/34.jpg&quot;
              alt=&quot;Card image cap&quot;
            /&gt;
  
            &lt;div&gt;
              &lt;FormGroup row&gt;
                &lt;Label sm={2}&gt;En:&lt;/Label&gt;
                &lt;Col sm={10}&gt;
                  &lt;Input
                    type=&quot;text&quot;
                    name=&quot;title&quot;
                    id=&quot;title&quot;
                    placeholder=&quot;title&quot;
                    
                  /&gt;
  
                  &lt;Input
                    type=&quot;text&quot;
                    name=&quot;description&quot;
                    id=&quot;description&quot;
                    placeholder=&quot;description&quot;
                    style={{ marginTop: '0.7rem', marginBottom: '0.7rem'}}
                  /&gt;
  
                  &lt;Input type=&quot;text&quot; name=&quot;tags&quot; id=&quot;tags&quot; placeholder=&quot;tags&quot; /&gt;
                &lt;/Col&gt;
               
              &lt;/FormGroup&gt;
  
          &lt;FormGroup row&gt;
            &lt;Label for=&quot;exampleSelect&quot; sm={2}&gt;
              Select Collection
            &lt;/Label&gt;
            &lt;Col sm={10}&gt;
              &lt;Select
                value={collection}
                // onChange={handleChangeCollection}
                onChange={(collectionsOptions) =&gt; {
                  console.log(&quot;value vvv:&quot;, collectionsOptions);
                  console.log(&quot;value.id: &quot;, collectionsOptions.id);
                  setCollection(collectionsOptions.id);
                }}
                options={collectionsOptions}
                getOptionLabel={(e) =&gt; e.name}
                getOptionValue={(e) =&gt; e.id}
              /&gt;
            &lt;/Col&gt;
          &lt;/FormGroup&gt;
  
          &lt;FormGroup row&gt;
            &lt;Label for=&quot;exampleSelect&quot; sm={2}&gt;
              Select Category
            &lt;/Label&gt;
            &lt;Col sm={10}&gt;
              &lt;Select
                value={category}
                onChange={(categoriesOptions) =&gt; {
                  console.log(
                    &quot;value vvv categoriesOptions:&quot;,
                    categoriesOptions
                  );
                  console.log(
                    &quot;value.id categoriesOptions: &quot;,
                    categoriesOptions.id
                  );
                  setCategory(categoriesOptions.id);
                }}
                options={categoriesOptions}
                getOptionLabel={(e) =&gt; e.name}
                getOptionValue={(e) =&gt; e.id}
              /&gt;
            &lt;/Col&gt;
          &lt;/FormGroup&gt;
  
          &lt;FormGroup row&gt;
            &lt;Label for=&quot;exampleSelect&quot; sm={2}&gt;
              Select brands
            &lt;/Label&gt;
            &lt;Col sm={10}&gt;
              &lt;Select
                value={brand}
                //onChange={handleChangeCollection}
                onChange={(brandsOptions) =&gt; {
                  console.log(&quot;value vvv:&quot;, brandsOptions);
                  console.log(&quot;value.id: &quot;, brandsOptions.id);
                  setBrand(brandsOptions.id);
                }}
                options={brandsOptions}
                getOptionLabel={(e) =&gt; e.name}
                getOptionValue={(e) =&gt; e.id}
              /&gt;
            &lt;/Col&gt;
          &lt;/FormGroup&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;FormGroup check row&gt;
            &lt;Col sm={{ size: 10, offset: 2 }}&gt;
              &lt;Button&gt;Submit&lt;/Button&gt;
            &lt;/Col&gt;
          &lt;/FormGroup&gt;
        &lt;/Form&gt;
      &lt;/Card&gt;
    );
  };
  
  export default AddProduct;
  </code></pre>