CODEWITHSUNDEEP
javascriptreactjsreact-hookscomponentsstate
MARTIN GITAU
MARTIN GITAU

Reputation: 81

am getting an error props.onSubmitForm is not a function while trying to pass data from child to parent component in react

I am trying to store input data in two states; name and age when onChange event is fired.

Thereafter I am trying to pass the stored data upon one level when an onSubmit event of a form is fired.

What I have realized is that when the form is submitted and it is now the time to pass the data up one level, I get an error "props.onSubmitForm is not a function".

I have noted this is a common error but i have tried comparing answers and code to no avail.

here is the child component with the form.

  const UserDetails = (props) => {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  const submittedFormhandler = (event) => {
    event.preventDefault();
    let userDetails = {
      name: name,
      age: age
    };

    props.onSubmitForm(userDetails);
  };

  const getNameHandler = (event) => {
    return setName(event.target.value);
  };

  const getAgeHandler = (event) => {
    return setAge(event.target.value);
  };

  return (
    <form onSubmit={submittedFormhandler}>
      <div>
        <label htmlFor="name">User name</label>
        <input type="text" name="name" id="" onChange={getNameHandler} />
      </div>
      <div>
        <label htmlFor="age">Age</label>
        <input type="number" name="age" id="" onChange={getAgeHandler} />
      </div>
      <button type="submit">Add User</button>
    </form>
  );
};

export default UserDetails;

here is the parent component

import UserDetails from "../UserDetails";

const DisplayDetails = () => {
  const submittedDataHandler = (inputData) => {
    return console.log(inputData);
  };

  return <UserDetails onSubmitForm={submittedDataHandler} />;
};

export default DisplayDetails;

Upvotes: 0

Views: 87

Answers (1)

Ryan Le
Ryan Le

Reputation: 8412

Your code works super fine, but I guess that's because you've used the wrong component

It should be DisplayDetails not UserDetails

  • This one works fine:

const DisplayDetails = () => {
  const submittedDataHandler = (inputData) => {
    return console.log(inputData);
  };

  return <UserDetails onSubmitForm={submittedDataHandler} />;
};

const UserDetails = (props) => {
  const [name, setName] = React.useState("");
  const [age, setAge] = React.useState("");

  const submittedFormhandler = (event) => {
    event.preventDefault();
    let userDetails = {
      name: name,
      age: age
    };

    props.onSubmitForm(userDetails);
  };

  const getNameHandler = (event) => {
    return setName(event.target.value);
  };

  const getAgeHandler = (event) => {
    return setAge(event.target.value);
  };

  return (
    <form onSubmit={submittedFormhandler}>
      <div>
        <label htmlFor="name">User name</label>
        <input type="text" name="name" id="" onChange={getNameHandler} />
      </div>
      <div>
        <label htmlFor="age">Age</label>
        <input type="number" name="age" id="" onChange={getAgeHandler} />
      </div>
      <button type="submit">Add User</button>
    </form>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<DisplayDetails />, rootElement);  // <-- RIGHT COMPONENT!!!
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <div id="root"></div>

  • And this one throw error like yours:

const DisplayDetails = () => {
  const submittedDataHandler = (inputData) => {
    return console.log(inputData);
  };

  return <UserDetails onSubmitForm={submittedDataHandler} />;
};

const UserDetails = (props) => {
  const [name, setName] = React.useState("");
  const [age, setAge] = React.useState("");

  const submittedFormhandler = (event) => {
    event.preventDefault();
    let userDetails = {
      name: name,
      age: age
    };

    props.onSubmitForm(userDetails);
  };

  const getNameHandler = (event) => {
    return setName(event.target.value);
  };

  const getAgeHandler = (event) => {
    return setAge(event.target.value);
  };

  return (
    <form onSubmit={submittedFormhandler}>
      <div>
        <label htmlFor="name">User name</label>
        <input type="text" name="name" id="" onChange={getNameHandler} />
      </div>
      <div>
        <label htmlFor="age">Age</label>
        <input type="number" name="age" id="" onChange={getAgeHandler} />
      </div>
      <button type="submit">Add User</button>
    </form>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<UserDetails />, rootElement);  // <-- WRONG COMPONENT HERE!!!
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <div id="root"></div>

The wrong version of your code which should be DisplayDetails:

Edit inspiring-jepsen-xolli

Upvotes: 1

Related Questions