title: finalData is not a function
body: <p>I'm trying to learn redux by creating multi step form (reactjs), everything is going fine, except when i click a button then all the data should go to one variable <code>finalData</code>, but its not going and i'm getting:</p>
  <p><code>TypeError: finalData.map is not a function</code></p>
  <p>When i check <code>console.log(userData);</code> i get all the data, but i want data to go to <code>finalData</code>, and <code>changeFinalData</code> is the one which updates it.</p>
  <p>When i console log finalData i get: <code>finalData =&gt; [...finalData, userData]</code>.</p>
  <p>What am i doing wrong?</p>
  <p>my code:</p>
  <pre class="lang-js prettyprint-override"><code>    import React, { useContext } from &quot;react&quot;;
      import { Form, Input, Button } from &quot;antd&quot;;
      import &quot;antd/dist/antd.css&quot;;
      // import { multiStepContext } from &quot;../StepContext&quot;;
      //-------------
      import { useDispatch, useSelector } from &quot;react-redux&quot;;
      import {
        changeName,
        changeUserId,
        selectId,
        selectName,
        changeSetStep,
        changeUserData,
        changeFinalData,
        selectCurrentStep,
        selectUserData,
        selectFinalData,
      } from &quot;../features/app/appSlice&quot;;
  
      function ThirdStep() {
        // const { setStep, userData, setUserData, submitData } =
        //   useContext(multiStepContext);
  
        //----
        const dispatch = useDispatch();
        const userData = useSelector(selectUserData);
        const finalDataa = useSelector(selectFinalData);
        console.log(userData);
  
        const submitData = () =&gt; {
          dispatch(changeFinalData((finalDataa) =&gt; [...finalDataa, userData]));
  
          changeUserData(&quot;&quot;);
          changeSetStep(1);
        };
  
        return (
          &lt;Form&gt;
            &lt;Form.Item
              label=&quot;City&quot;
              name=&quot;City&quot;
              initialValue={userData[&quot;city&quot;] || &quot;&quot;}
              onChange={(e) =&gt;
                dispatch(changeUserData({ ...userData, city: e.target.value }))
              }
            &gt;
              &lt;Input type=&quot;string&quot; /&gt;
            &lt;/Form.Item&gt;
  
            &lt;Form.Item
              label=&quot;Landmark&quot;
              name=&quot;Landmark&quot;
              initialValue={userData[&quot;landmark&quot;] || &quot;&quot;}
              onChange={(e) =&gt;
                dispatch(changeUserData({ ...userData, landmark: e.target.value }))
              }
            &gt;
              &lt;Input type=&quot;string&quot; /&gt;
            &lt;/Form.Item&gt;
  
            &lt;Form.Item
              label=&quot;Postal Code&quot;
              name=&quot;Postal Code&quot;
              initialValue={userData[&quot;postcode&quot;] || &quot;&quot;}
              onChange={(e) =&gt;
                dispatch(changeUserData({ ...userData, postcode: e.target.value }))
              }
            &gt;
              &lt;Input type=&quot;string&quot; /&gt;
            &lt;/Form.Item&gt;
  
            &lt;div&gt;
              &lt;Button
                variant=&quot;contained&quot;
                onClick={() =&gt; dispatch(changeSetStep(2))}
                color=&quot;secondary&quot;
              &gt;
                Back
              &lt;/Button&gt;
              &lt;span&gt; &lt;/span&gt;
              &lt;Button
                variant=&quot;contained&quot;
                onClick={() =&gt; submitData()}
                color=&quot;primary&quot;
              &gt;
                Submit
              &lt;/Button&gt;
            &lt;/div&gt;
          &lt;/Form&gt;
        );
      }
  
      export default ThirdStep;
  </code></pre>
  <p>my appSlice.js:</p>
  <pre class="lang-js prettyprint-override"><code>    import { createSlice } from &quot;@reduxjs/toolkit&quot;;
  
      export const appSlice = createSlice({
        name: &quot;app&quot;,
        initialState: {
          userData: [],
          finalData: [],
          currentStep: 1,
        
        },
        reducers: {
          changeSetStep: (state, action) =&gt; {
            state.currentStep = action.payload;
          },
          changeUserData: (state, action) =&gt; {
            state.userData = action.payload;
          },
          changeFinalData: (state, action) =&gt; {
            state.finalData = action.payload;
          },
  
         
        },
      });
      export const {
        
        changeSetStep,
        changeUserData,
        changeFinalData,
      } = appSlice.actions;
  
      export const selectCurrentStep = (state) =&gt; state.app.currentStep;
      export const selectUserData = (state) =&gt; state.app.userData;
      export const selectFinalData = (state) =&gt; state.app.finalData;
  
      export default appSlice.reducer;
  </code></pre>
  <p>DisplayData.js:</p>
  <pre><code>    import React, { useContext } from &quot;react&quot;;
  
      import {
        TableContainer,
        TableHead,
        TableBody,
        TableCell,
        TableRow,
        Table,
      } from &quot;@material-ui/core&quot;;
      import { useSelector } from &quot;react-redux&quot;;
      import { selectFinalData } from &quot;../features/app/appSlice&quot;;
      // import { multiStepContext } from &quot;../StepContext&quot;;
  
      function DisplayData() {
        // const { finalData } = useContext(multiStepContext);
        const finalDataa = useSelector(selectFinalData);
        console.log(finalDataa);
        return (
          &lt;div&gt;
            &lt;TableContainer style={{ display: &quot;flex&quot;, justifyContent: &quot;center&quot; }}&gt;
              &lt;Table
                border=&quot;1&quot;
                style={{ width: &quot;70%&quot;, justifyContent: &quot;center&quot; }}
                size=&quot;small&quot;
                aria-label=&quot;caption table&quot;
              &gt;
                &lt;TableHead&gt;
                  &lt;TableRow
                    style={{ backgroundColor: &quot;burlywood&quot;, color: &quot;aliceblue&quot; }}
                  &gt;
                    &lt;TableCell&gt;First Name &lt;/TableCell&gt;
                    &lt;TableCell&gt;Last Name &lt;/TableCell&gt;
                    &lt;TableCell&gt;Contact Number &lt;/TableCell&gt;
                    &lt;TableCell&gt;Email Address &lt;/TableCell&gt;
                    &lt;TableCell&gt;Country &lt;/TableCell&gt;
                    &lt;TableCell&gt;District &lt;/TableCell&gt;
                    &lt;TableCell&gt;City &lt;/TableCell&gt;
                    &lt;TableCell&gt;Landmark &lt;/TableCell&gt;
                    &lt;TableCell&gt;Postal Code &lt;/TableCell&gt;
                  &lt;/TableRow&gt;
                &lt;/TableHead&gt;
                &lt;TableBody&gt;
                  {finalDataa.map((data) =&gt; (
                    &lt;TableRow key={data.email}&gt;
                      &lt;TableCell&gt;{data.firstName} &lt;/TableCell&gt;
                      &lt;TableCell&gt;{data.lastName} &lt;/TableCell&gt;
                      &lt;TableCell&gt;{data.contact} &lt;/TableCell&gt;
                      &lt;TableCell&gt;{data.email} &lt;/TableCell&gt;
                      &lt;TableCell&gt;{data.country} &lt;/TableCell&gt;
                      &lt;TableCell&gt;{data.district} &lt;/TableCell&gt;
                      &lt;TableCell&gt;{data.city} &lt;/TableCell&gt;
                      &lt;TableCell&gt;{data.landmark} &lt;/TableCell&gt;
                      &lt;TableCell&gt;{data.postcode} &lt;/TableCell&gt;
                    &lt;/TableRow&gt;
                  ))}
                &lt;/TableBody&gt;
              &lt;/Table&gt;
            &lt;/TableContainer&gt;
          &lt;/div&gt;
        );
      }
  
      export default DisplayData;
  </code></pre>
  <p>my App.js:</p>
  <pre class="lang-js prettyprint-override"><code>    import { useState } from &quot;react&quot;;
      import &quot;./App.css&quot;;
      import Header from &quot;./components/Header&quot;;
  
      import FirstStep from &quot;./components/FirstStep&quot;;
      import SecondStep from &quot;./components/SecondStep&quot;;
      import ThirdStep from &quot;./components/ThirdStep&quot;;
      import { Stepper, StepLabel, Step } from &quot;@material-ui/core&quot;;
      // import { multiStepContext } from &quot;./StepContext&quot;;
      import { useContext } from &quot;react&quot;;
      import DisplayData from &quot;./components/DisplayData&quot;;
      //---
  
      import { useDispatch, useSelector } from &quot;react-redux&quot;;
      import {
        changeName,
        changeUserId,
        selectId,
        selectName,
        changeSetStep,
        changeUserData,
        changeFinalData,
        selectCurrentStep,
        selectUserData,
        selectFinalData,
      } from &quot;./features/app/appSlice&quot;;
      //--
  
      function App() {
        const SelectFinalData = useSelector(selectFinalData);
        const SelectCurrentStep = useSelector(selectCurrentStep);
  
        // const [name,setName]=useState('kalle')
  
        // const { currentStep, finalData } = useContext(multiStepContext);
        const showStep = (step) =&gt; {
          switch (step) {
            case 1:
              return &lt;FirstStep /&gt;;
            case 2:
              return &lt;SecondStep /&gt;;
  
            case 3:
              return &lt;ThirdStep /&gt;;
          }
        };
        return (
          &lt;div className=&quot;App&quot;&gt;
            &lt;header className=&quot;App-header&quot;&gt;
              &lt;h3 style={{ color: &quot;red&quot;, textDecoration: &quot;underline&quot; }}&gt;
                Reactjs multi step Application
              &lt;/h3&gt;
              &lt;div className=&quot;center-stepper&quot;&gt;
                &lt;Stepper
                  style={{ width: &quot;18%&quot; }}
                  activeStep={SelectCurrentStep - 1}
                  orientation=&quot;horizontal&quot;
                &gt;
                  &lt;Step&gt;
                    &lt;StepLabel&gt;&lt;/StepLabel&gt;
                  &lt;/Step&gt;
                  &lt;Step&gt;
                    &lt;StepLabel&gt;&lt;/StepLabel&gt;
                  &lt;/Step&gt;
                  &lt;Step&gt;
                    &lt;StepLabel&gt;&lt;/StepLabel&gt;
                  &lt;/Step&gt;
                &lt;/Stepper&gt;
              &lt;/div&gt;
              {showStep(SelectCurrentStep)}
              {SelectFinalData.length &gt; 0 ? &lt;DisplayData /&gt; : &quot;&quot;}
            &lt;/header&gt;{&quot; &quot;}
          &lt;/div&gt;
        );
      }
  
      export default App;
  </code></pre>