CODEWITHSUNDEEP
reactjs
nathannewyen
nathannewyen

Reputation: 253

TypeError: props... is not a function in reactjs

I'm trying to get data API from star wars website with react project and here's my code:

const Form = (props) => {
  const [search, setSearch] = useState("people");
  const [searchID, setSearchID] = useState(1);

  const [responseData, setResponseData] = useState({});

  useEffect(() => {
    buttonAPI();
    setSearch(props.type);
  }, [props.type]);

  const buttonAPI = () => {
    axios
      .get(`https://swapi.dev/api/${props.type}/`)
      .then((res) => {
        setResponseData(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    navigate(`/${search}/${searchID}`);
  };

  return (
    <div className="container" style={pageStyle}>
      <form onSubmit={onSubmit}>
  .
  .
  .

)

I'm getting this error while trying to add props.setSearch(props.type); into useEffect

Here is my github for this project:

https://github.com/nathannewyen/reactjs-practice/tree/master/luke-api

Upvotes: 1

Views: 4037

Answers (1)

andsilver
andsilver

Reputation: 5972

From your App.jsx:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Info from "./components/Info";
import Form from "./components/Form";

function App() {
  return (
    <div className="App">
      <Form />
      <Info />
    </div>
  );
}

export default App;

You pass nothing to Form component, so the props is empty and you cannot call a function that not exists.

Upvotes: 1

Related Questions