CODEWITHSUNDEEP
reactjs
Zaid
Zaid

Reputation: 29

Why does the function call gives me error in the console?

i am trying to send a value to an API using function "handleValue(value)"but when i click on submit and try to get data from the API. I get this error in the console "props.handleValue is not a function at onSubmitHandle (SearchBar.js:13)"

I can't find any problem with the function. hopefully someone can help. Thank you in advance!!

Unsplash.js

import React from 'react';
import NavBar from './NavBar/NavBar';

import axios from 'axios';
import SearchBar from './searchBar/SearchBar';
const Unsplash = () => {
  async function handleValue(value) {
    try {
      const response = await axios.get('https://api.unsplash.com/photos', {
        params: {query: value},
        headers: {
          Authorization:
            'Client-ID 9fIWmDLxc3_GpFozQaYFigZbPyCVwvFMi7xn_gA0ero',
        },
      });
      console.log(response);
    } catch (error) {
      console.log(error);
    }
  }

  return (
    <div>
      <NavBar />
      <SearchBar handleValue={handleValue} />
    </div>
  );
};

export default Unsplash;

SearchBar.js

import React, {useState} from 'react';

const SearchBar = (props) => {
  const [input, setinput] = useState('');
  const [value, setValue] = useState('');

  function handleInput(e) {
    setinput(e.target.value);
  }
  function onSubmitHandle(e) {
    setValue(input);
    e.preventDefault();
    props.handleValue(value);
    setinput('');
  }
  return (
    <form onSubmit={onSubmitHandle}>
      <div
        style={{margin: '20px', textAlign: 'center'}}
        className="ui fluid category huge search"
      >
        <div className="ui icon input">
          <input
            className="prompt"
            type="text"
            value={input}
            onChange={handleInput}
            placeholder="Search animals..."
          />

          <button
            onClick={onSubmitHandle}
            style={{background: 'white', border: 'none'}}
          >
            <i className="search large icon"></i>
          </button>
        </div>
        <div className="results"></div>
      </div>
      <h1>{value}</h1>
    </form>
  );
};

export default SearchBar;

Upvotes: 0

Views: 31

Answers (1)

JuanCaicedo
JuanCaicedo

Reputation: 3438

I think there might be something wrong with your code that's outside of the snippet that you provided 😅 I put together this sandbox with almost the same code, and it seems to work fine and have that prop defined.

If you find some more info, please update this question and I'll also update my answer to help!

Upvotes: 1

Related Questions