title: How to add a whole array to useState variable
body: <p>I'm trying to add a whole array to useState variable</p>
  
  <pre><code>import React, { Fragment, useState, useEffect } from 'react';
  import { Form, Button, Popover, OverlayTrigger } from 'react-bootstrap';
  
  const Filter = props =&gt; {
    const [formData, setFormData] = useState({
      filter: ''
    });
    const [items, setItems] = useState([]);
    const [retrievedItems, setRetrievedItems] = useState([]);
  
    const addToFilter = newFilter =&gt; {
      let retrievedFilter = ["da vinci","paris", "london"];
      console.log(retrievedFilter);
      if (retrievedFilter.length &gt; 0) {
        setRetrievedItems([...retrievedItems, retrievedFilter]);
        retrievedFilter = 0;
        setRetrievedItems([...retrievedItems, newFilter]);
      } else {
        setItems([...items, newFilter]);
      }
      console.log('items are: ', items);
      console.log('retrieve filter', props.retrievedFilter);
      console.log('retrieved items: ', retrievedItems);
    };
  
    useEffect(() =&gt; {
      console.log('useEffect ', retrievedItems);
    }, [retrievedItems]);
  
    const deleteFilter = index =&gt; {
      // props.retrievedFilter.splice(index, 1);
      items.splice(index, 1);
      setItems([...items]);
      // setItems([...props.retrievedFilter, ...items]);
      console.log(items);
    };
  
    const { filter } = formData;
    const onChange = e =&gt; {
      setFormData({ ...formData, [e.target.name]: e.target.value });
    };
  
    const onSubmit = e =&gt; {
      e.preventDefault();
      addToFilter(filter);
      // Passing filter data up (i.e: to components that use &lt;Filter /&gt;)
      props.filterData(filter);
      //Close the Popover
      document.body.click();
    };
  
    const popover = (
      &lt;Popover id="popover-basic"&gt;
        &lt;Form&gt;
          &lt;Form.Group controlId="formGroupEmail"&gt;
            &lt;Form.Label&gt;Add New Filter&lt;/Form.Label&gt;
            &lt;Form.Control
              type="text"
              placeholder="New Filter"
              name="filter"
              onChange={e =&gt; onChange(e)}
            /&gt;
          &lt;/Form.Group&gt;
          &lt;Button variant="dark" type="submit" onClick={e =&gt; onSubmit(e)}&gt;
            Add
          &lt;/Button&gt;
        &lt;/Form&gt;
      &lt;/Popover&gt;
    );
  
    return (
      &lt;Fragment&gt;
        &lt;label&gt;
          &lt;p className="filter-title"&gt;{props.title}&lt;/p&gt;
        &lt;/label&gt;
        &lt;div className={props.className ? props.className : 'filter'}&gt;
          {!props.retrievedFilter
            ? items.map((item, index) =&gt; {
                return (
                  &lt;div className="filter-text" key={index}&gt;
                    {item}
                    &lt;Button
                      className="filter-button"
                      size="sm"
                      onClick={() =&gt; deleteFilter(index)}
                    &gt;
                      X
                    &lt;/Button&gt;
                  &lt;/div&gt;
                );
              })
            : props.retrievedFilter.map((item, index) =&gt; {
                return (
                  &lt;div className="filter-text" key={index}&gt;
                    {item}
                    &lt;Button
                      className="filter-button"
                      size="sm"
                      onClick={() =&gt; deleteFilter(index)}
                    &gt;
                      X
                    &lt;/Button&gt;
                  &lt;/div&gt;
                );
              })}
  
          &lt;OverlayTrigger
            trigger="click"
            placement="right"
            rootClose
            overlay={popover}
          &gt;
            &lt;p className="text-field"&gt;Type new one&lt;/p&gt;
          &lt;/OverlayTrigger&gt;
        &lt;/div&gt;
      &lt;/Fragment&gt;
    );
  };
  
  export default Filter;
  </code></pre>
  
  <p>however retrievedItems shows as an empty array in the console.</p>
  
  <p>any help would be appreciated.</p>