reactjs - value is not logged into the console

Question

The state values are passed in the searchYelp props as parameters in the handleSearch function. The values should be logged in the console with onClick. However, the argument passed into the term parameter is not logged into the console while the other two arguments (location, sortBy) are logged into the console.

import React, {useState} from 'react';
import './SearchBar.css';

const sortByOptions = {
    'Best Match': 'best_match',
    'Highest Rated': 'rating',
    'Most Reviewed': 'review_count'
}

function SearchBar({ searchYelp }) {
    const [ term, setTerm ] = useState('');
    const [ location, setLocation ] = useState('');
    const [ sortBy, setSortBy ] = useState('best_match');

    const getSortByClass = (sortByOption) => {
        if(sortBy === sortByOption) {
            return 'active';
        } else {
            return '';
        }
    }

    const handleSortByChange = (sortByOption) => {
        setSortBy(sortByOption);
    }

    const handleTermChange = ({ target }) => {
        setTerm(target.value);
    }

    const handleLocationChange = ({ target }) => {
        setLocation(target.value)
    }

    const handleSearch = (e) => {
        searchYelp(term, location, sortBy);
        e.preventDefault();
    }

    const renderSortByOptions = () => {
        return Object.keys(sortByOptions).map((sortByOption) => {
            let sortByOptionValue = sortByOptions[sortByOption];
            return <li onClick={()=>handleSortByChange(sortByOptionValue)} className={getSortByClass(sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>
        })
    }

    return(
        <div className="SearchBar">
            <div className="SearchBar-sort-options">
                <ul>
                    {renderSortByOptions()}
                </ul>
            </div>
            <div className="SearchBar-fields">
                <input onchange={handleTermChange} placeholder="Search Businesses" />
                <input onChange={handleLocationChange} placeholder="Where?" />
            </div>
            <div className="SearchBar-submit">
                <a onClick={handleSearch} href="#">Let's Go</a>
            </div>
        </div>
    )
}

export default SearchBar;

import React from 'react';
import './App.css';
import BusinessList from '../BusinessList/BusinessList';
import SearchBar from '../SearchBar/SearchBar';

const business = {
  imageSrc: 'https://content.codecademy.com/programs/react/ravenous/pizza.jpg',
  name: 'MarginOtto Pizzeria',
  address: '1010 Paddington Way',
  city: 'Flavortown',
  state: 'NY',
  zipCode: '10101',
  category: 'Italian',
  rating: 4.5,
  reviewCount: 90
}

const businesses = [business, business, business, business, business, business]

function App() {
  const searchYelp = (term, location, sortBy) => {
    console.log(`you are searching ${term} ${location} ${sortBy}`)
  }

  return (
    <div className="App">
      <h1>ravenous</h1>
      <SearchBar searchYelp={searchYelp} />
      <BusinessList businesses={businesses}/>
    </div>
  );
}

export default App;

question from:https://stackoverflow.com/questions/65516927/value-is-not-logged-into-the-console

Answer 1

<input onchange={handleTermChange} placeholder="Search Businesses" />

onchange should be camel case, as onChange