Question 72590 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Uncaught TypeError: educations is undefined – Reactjs

I’m trying to save the values typed in the Input inside the state variable. But when I type any value into the input that calls the HandleInstitution function I get the following error: Uncaught TypeError: educations is undefined.

I’m a beginner in React, can someone help me?

My code:

import '../styles/education.css';
import { useState } from 'react';

function Education(){
    var [educations, setEducations] = useState(
        [
            {
              id: 1,
              institution: '',
              course: '',
              date: '',
            },
          ]
      );
    function handleAddEducation(){
        setEducations([
            ...educations,
            {
              id: educations.length + 1,
              institution: '',
              course: '',
              date: '',
            },
          ]);
    }
    function HandleInstitution(event, id){
        const { name, value } = event.target;
        
        setEducations((prevEducation) => {
            prevEducation.map((educationItem) => {
                if(educationItem.id === id){
                    educationItem.institution=value;
                }
            })
        });
    }
    return (
        <div className="background" id="education">
            <h2>Education</h2>
            {educations.map((education) => (
                <div className="form" key={education.id}>
                    <div className="input" type="text">
                        <label htmlFor={`inputInstitution-${education.id}`}>Institution name: </label>
                        <input type="text" onChange={ (event) => { HandleInstitution(event, education.id) } } name={`inputInstitution-${education.id}`} placeholder="Enter the name of your school or university" required></input>
                    </div>
                    <div className="input">
                        <label htmlFor={`inputCourse-${education.id}`}>Course Name: </label>
                        <input name={`inputCourse-${education.id}`} type="text" placeholder="Enter the name of your course" required></input>
                    </div>
                    <div className="input">
                        <label htmlFor={`dateInput-${education.id}`}>Date of conclusion: </label>
                        <input name={`dateInput-${education.id}`} type="date" required></input>
                    </div>
                </div>
            ))}
            <button type="submit" onClick={ handleAddEducation }>Add Education</button>
        </div>
    );
}
export default Education;
Tags:

2

Answers


  1. 0

    You may also be getting an error that says: Unexpected var, use let or const instead. You should change the line that makes the educations state to be:

    const [educations, setEducations] = useState(
    [
        {
            id: 1,
            institution: '',
            course: '',
            date: '',
        },
    ]
);

    The setEducations function should be called with a new education array or a function that will return a new education array. Perhaps:

    function HandleInstitution(event, id) {
    const { name, value } = event.target;

    setEducations(educations.map((educationItem) => {
        const cpy = { ...educationItem };
        if (educationItem.id === id)
            cpy.institution = value;
        return cpy;
    }));
}
    Login or Signup to reply.
  2. 0

    when you create a function/arrow function setEducations((prevEducation) => {} then you should return a value, otherwise, it will gonna return undefined. In your case, it will gonna return undefined and set it to eductions state.

    function HandleInstitution(event, id){
    const { name, value } = event.target;
    setEducations((prevEducation) => {
        //don't forget return the changed array
        return prevEducation.map((educationItem) => { 
            if(educationItem.id === id){
                educationItem.institution=value;
            }
            //same goes here
            return educationItem;
        })
    });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search