I am currently using two components, and implemented react Route on both. But when I click the parent component, ViewAll.js, I cannot fetch the values from my mock json server api and this error shows:

TypeError: Cannot read properties of undefined (reading 'map') ViewAll

But I can see the values from the json server displaying on the child component, which is the InputForm.js

Here is my code snippet:

InputForm.js

import { useEffect, useState } from "react";
import ViewAll from "./ViewAll";

const InputForm = () => {
  //First Name Validation
  const [enteredFName, setEnteredFName] = useState("");
  const [enteredFNameTouch, setEnteredFNameTouch] = useState(false);

  const enteredFNameFilled = enteredFName.trim() !== "";
  const enteredFNameNotFilled = !enteredFNameFilled && enteredFNameTouch;

  const enteredFNameValid = /^[A-Za-z\s] $/.test(enteredFName);
  const enteredFNameInvalid = !enteredFNameValid && enteredFNameNotFilled;

  const fNameChangeHandler = (event) => {
    setEnteredFName(event.target.value);
  };

  const fNameBlurHandler = () => {
    setEnteredFNameTouch(true);
  };

  //Last Name Validation
  const [enteredLName, setEnteredLName] = useState("");
  const [enteredLNameTouch, setEnteredLNameTouch] = useState(false);

  const enteredLNameFilled = enteredLName.trim() !== "";
  const enteredLNameNotFilled = !enteredFNameFilled && enteredLNameTouch;

  const enteredLNameValid = /^[A-Za-z\s] $/.test(enteredLName);
  const enteredLNameInvalid = !enteredLNameValid && enteredLNameNotFilled;

  const lNameChangeHandler = (event) => {
    setEnteredLName(event.target.value);
  };

  const lNameBlurHandler = () => {
    setEnteredLNameTouch(true);
  };

  //EmailValidation
  const [enteredEmail, setEnteredEmail] = useState("");
  const [enteredEmailTouch, setEnteredEmailTouch] = useState(false);

  const enteredEmailFilled = enteredEmail.trim() !== "";
  const enteredEmailNotFilled = !enteredEmailFilled && enteredEmailTouch;

  const enteredEmailValid = enteredEmail.includes("@");
  const enteredEmailInvalid = !enteredEmailValid && enteredEmailNotFilled;

  const emailChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
  };

  const emailBlurHandler = () => {
    setEnteredEmailTouch(true);
  };

  //EIDValidation
  const [enteredEid, setEnteredEid] = useState("");
  const [enteredEidTouch, setEnteredEidTouch] = useState(false);

  const enteredEidFilled = enteredEid.trim() !== "";
  const enteredEidNotFilled = !enteredEidFilled && enteredEidTouch;

  const eidChangeHandler = (event) => {
    setEnteredEid(event.target.value);
  };

  const eidBlurHandler = () => {
    setEnteredEidTouch(true);
  };

  //Birthday Validation
  const [enteredBirthday, setEnteredBirthday] = useState("");
  const [enteredBirthdayTouch, setEnteredBirthdayTouch] = useState(false);

  const enteredBirthdayFilled = enteredBirthday.trim() !== "";
  const enteredBirthdayNotFilled =
    !enteredBirthdayFilled && enteredBirthdayTouch;

  const birthdayChangeHandler = (event) => {
    setEnteredBirthday(event.target.value);
  };

  const birthdayBlurHandler = () => {
    setEnteredBirthdayTouch(true);
  };

  const [inputData, setInputData] = useState([
    {
      fName: enteredFName,
      lName: enteredLName,
      email: enteredEmail,
      eid: enteredEid,
      birthday: enteredBirthday,
    },
  ]);

  let formValid = false;
  if (
    enteredFNameFilled &&
    enteredLNameFilled &&
    enteredEmailFilled &&
    enteredEidFilled &&
    enteredBirthdayFilled
  ) {
    formValid = true;
  }

  const formSubmitHandler = (event) => {
    event.preventDefault();

    if (!enteredFNameValid || !enteredLNameValid) {
      alert("First Name and Last Name accepts letters only.");
      return;
    }

    setInputData({
      fName: enteredFName,
      lName: enteredLName,
      email: enteredEmail,
      eid: enteredEid,
      birthday: enteredBirthday,
    });

    console.log(inputData);
    console.log(
      enteredFName,
      enteredLName,
      enteredEmail,
      enteredEid,
      enteredBirthday
    );

    setEnteredFName("");
    setEnteredFNameTouch(false);
    setEnteredLName("");
    setEnteredLNameTouch(false);
    setEnteredEmail("");
    setEnteredEmailTouch(false);
    setEnteredEid("");
    setEnteredEidTouch(false);
    setEnteredBirthday("");
    setEnteredBirthdayTouch(false);
  };

  useEffect(() => {
    fetch("http://localhost:3001/inputData")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data);
        setInputData(data);
      });
  }, []);

  return (
    <form onSubmit={formSubmitHandler}>
      <div>
        <h1>Please Enter your details below</h1>
      </div>
      <div className="control-group">
        <div>
          <label>First Name</label>
          <input
            type="text"
            required
            id="fName"
            onChange={fNameChangeHandler}
            onBlur={fNameBlurHandler}
            value={enteredFName}
          />
          {enteredFNameInvalid && <p>First Name is required.</p>}
        </div>
        <div>
          <label>Last Name</label>
          <input
            type="text"
            required
            id="lName"
            onChange={lNameChangeHandler}
            onBlur={lNameBlurHandler}
            value={enteredLName}
          />
          {enteredLNameInvalid && <p>Last Name is required.</p>}
        </div>
      </div>
      <div>
        <label>Email</label>
        <input
          type="email"
          required
          id="email"
          onChange={emailChangeHandler}
          onBlur={emailBlurHandler}
          value={enteredEmail}
        />
        {enteredEmailInvalid && <p>Email is required.</p>}
      </div>
      <div>
        <label>EID</label>
        <input
          type="number"
          required
          min="1"
          step="1"
          id="eid"
          onChange={eidChangeHandler}
          onBlur={eidBlurHandler}
          value={enteredEid}
        />
        {enteredEidNotFilled && <p>EID is required.</p>}
      </div>
      <div>
        <label>Birthday</label>
        <input
          type="date"
          required
          id="birthday"
          onChange={birthdayChangeHandler}
          onBlur={birthdayBlurHandler}
          value={enteredBirthday}
        />
        {enteredBirthdayNotFilled && <p>Birthday is required.</p>}
      </div>
      <div>
        <button
          type="submit"
          disabled={!formValid}
          onClick={() => setInputData(inputData)}
        >
          Submit
        </button>
        <div>
        </div>
        <ViewAll inputs={inputData} />
      </div>
    </form>
  );
};

export default InputForm;

ViewAll.js

import React, { useEffect } from "react";

const ViewAll = (props) => {

  const inputs = props.inputs;

  return (<div>
    {inputs.map((input) => (
      <div key={input.id}>
        <p>First Name: {input.fName}</p>
        <p>Last Name: {input.lName}</p>
        <p>Email: {input.email}</p>
        <p>EID: {input.eid}</p>
        <p>Birthday: {input.birthday}</p>
      </div>
    ))}
  </div>);
};

export default ViewAll;

CodePudding user response：

If you are going to map through an object:

import React, { useEffect } from "react";

const ViewAll = (props) => {

  const {inputs} = props; //destructuring, not necessary but common

  return (<div>
    {inputs && Object.keys(inputs).map((inputKey) => ( 
      <div key={inputKey}>
        <p>First Name: {inputs[inputKey].fName}</p>
        <p>Last Name: {inputs[inputKey].lName}</p>
        <p>Email: {inputs[inputKey].email}</p>
        <p>EID: {inputs[inputKey].eid}</p>
        <p>Birthday: {inputs[inputKey].birthday}</p>
      </div>
    ))}
  </div>);
};

export default ViewAll;

Notice that inputs && ... will only render the latter, if inputs is not falsy