title: React Context API context API issues , when adding and removing an items from UI
body: <p>I have this working code link, that have some issues with the following.</p>
  <h2>Adding items</h2>
  <p>I have multi components called row.. I need to add a single item to each of them, problems is the items is getting added to every one of the rows, instead of the selected one? is the context API the issue or should I use redux, or some other solution for that ? react mind set is really different when it comes to state, any idea how to achieve adding an item to every single row separately?</p>
  <h2>Removing a single element..</h2>
  <p>to say the truth I have no access to the id I tried to uses UUID generator, and pass the id down using props, which was a very stupid idea since it regenerate a different id each time, any idea how can I target the id of the parent element,</p>
  <p>in the icon component so I can use the filter method on that state and remove the selected item from the items array ??</p>
  <h2>hiding an icon after click outside of the item …</h2>
  <p>if you have noticed once you click on an item it shows an icon, what if I decided on not doing any thing and remove the icon ? I tried removing it from the item it self  element by using onBlur event but it resulted in the icon (losing the a passed down functionality) so I wont be able to remove the item later on.. currently the icon will disappear but then icon functionality (remove the current element has gone down)</p>
  <p><a href="https://codesandbox.io/s/cool-booth-ylm43?file=/package.json:178-253" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit react-context-api-context-api-issues-when-adding-and-removing-an-items-from-ui" /></a></p>
  <pre><code>// Context Module
  import React, { useReducer } from 'react'
  import appContext from './appContext'
  import AppReducer from './appReducer'
  import Item from '../../components/Item';
  // the action to chanhe the state !!! 
  import {
      ICONS, 
      ITEMS, 
      ADD_ITEM,
      REMOVE_ITEM
      
  }  from '../types'
  // Creating the state  MUST BE A CAPITAL OTHER WISE IT WILL B^&amp;% !! AND REFUSE TO COMPILE
  const AppState = (props) =&gt; {
  const initialState = {
      Icons : false,
      Items : [&lt;Item/&gt;],
  }
  
  const [state, dispatch] = useReducer(AppReducer, initialState)
  const Iconsshow = () =&gt; {
      // show the icon 
      dispatch({
          type: ICONS,
          stabelIcons : true
      })
  }
  
  const Iconshide = () =&gt; {
      // show the icon 
      dispatch({
          type: ICONS,
          stabelIcons : false
      })
  }
  
  const AddItem = ()=&gt; {
      dispatch({
      type: ADD_ITEM,
      Items : [...state.Items, initialState.Items]
  })
  }
  
  const RemoveItem = (e)=&gt; {
      dispatch({
      type: REMOVE_ITEM,
      Items : [[&lt;Item/&gt;]]
  })
  }
  
  return &lt;appContext.Provider
  value={{ 
      Icons : state.Icons,
      Items : state.Items,
      AddItem,
      RemoveItem
      }}&gt;
  {props.children}
  &lt;/appContext.Provider&gt;
  }
  
  export default AppState;
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Reducer Module
  
  import {
      ICONS_SHOW,
      ICONS_HIDE,
      ITEMS,
      ADD_ITEM,
      REMOVE_ITEM
  } from "../types"
  
  export default (state, action ) =&gt; {
  
  switch(action.type) {
      case ICONS_SHOW:
      return {
          ...state,
          Icons: true
      } 
      case ICONS_HIDE:
      return {
          ...state,
          Icons: false
      }
      case ITEMS:
      return {
          ...state,
          Items: action.Items
      } 
      case ADD_ITEM:
          return {
          ...state,
          Items: [...state.Items, action.payload]
       
      }
      case REMOVE_ITEM:
          return {
          ...state,
          Items: action.payload
      }
  default: 
  return state
  }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>code box dependencies</p>
  <pre><code>&quot;dependencies&quot;: {
        &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.36&quot;,
        &quot;@fortawesome/free-brands-svg-icons&quot;: &quot;^5.15.4&quot;,
        &quot;@fortawesome/free-regular-svg-icons&quot;: &quot;^5.15.4&quot;,
        &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.4&quot;,
        &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.15&quot;,
        &quot;@testing-library/jest-dom&quot;: &quot;^5.14.1&quot;,
        &quot;@testing-library/react&quot;: &quot;^11.2.7&quot;,
        &quot;@testing-library/user-event&quot;: &quot;^12.8.3&quot;,
        &quot;moment-timezone&quot;: &quot;^0.5.33&quot;,
        &quot;node-sass&quot;: &quot;^6.0.1&quot;,
        &quot;react&quot;: &quot;^17.0.2&quot;,
        &quot;react-dom&quot;: &quot;^17.0.2&quot;,
        &quot;react-live-clock&quot;: &quot;^5.2.0&quot;,
        &quot;react-modal&quot;: &quot;^3.14.3&quot;,
        &quot;react-moment&quot;: &quot;^1.1.1&quot;,
        &quot;react-scripts&quot;: &quot;4.0.3&quot;,
        &quot;uuid&quot;: &quot;^8.3.2&quot;,
        &quot;web-vitals&quot;: &quot;^1.1.2&quot;
    },
  </code></pre>