educationData.map is not a function error React?

[mish]

Hey guys,

I keep getting a educationData.map is not a function error after I submit my form with or without filling out the the form. I would like to pass my form data (genData,edData,paData) to my Results component. Any help in solving this?

GHP: React App
GH: GitHub - pllealfunes/react-cv-app: A React app that creates a CV Application
Stuff I have used to make this: How to Build Dynamic Forms in React
Related Q’s: Way to not repeat code in React project?

[saurabhv749]

Form.js

 const [educationData, setEdData] = React.useState([{
    schoolName: "",
    degree: "",
    gradDate: ""
  }]);

Initially educationData is Array and you have used map method to generate input fields .

The error is caused by the handleSubmit function.
when submit button is clicked educationData is no more an Array but on Object hence educationData.map is not a function

function handleSubmit(event) {

  // .....
   
 setEdData(() => {
      return {
        schoolName: "",
        degree: "",
        gradDate: ""
      }
    });

  // ......
  }

Render

{

educationData.map( (input, index) => {  } )

}

[saurabhv749]

paData will cause the same error too.

Results.jsx

props here is an object and Objects are not valid as a React child

  <div className='resultsContainer'>
         {props }
   </div>

[mish]

Yes, thank you. As I am working on the issue I also ran into the errors you mentioned. I will update when I have solved the issue.

[mish]

So, I changed my setEdData and setPaData to be an array in my handleSubmit function but I’m not sure how to get my results to display in my results component. Right now I’m only seeing the genData in the results when I console.log.

[saurabhv749]

take a look at line 3.

setResults(genData,educationData,paData);

since results can have single state, it picks the first one which is genData and ignores rest.

instead of doing that you can use an array or object for convenience

setResults({
basic: genData,
academic: educationData,
experience: paData
});

[mish]

Thank you so much! Well explained. Now I can move onto the next steps of my application

[saurabhv749]

I’m glad it helped, best of luck for your application