Converting class based component to function based component

Question

I need to convert class based components to function based components.After converting this code,I am getting the compilation error as 'filterText' is assigned a value but never used no-unused-vars 'inStockOnly' is assigned a value but never used no-unused-vars

Unable to identify where I am going wrong.

The class based code is

import React, { Component } from 'react';

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
    this.handleInStockChange = this.handleInStockChange.bind(this);
  }
  
  handleFilterTextChange(e) {
    this.props.onFilterTextChange(e.target.value);
  }
  
  handleInStockChange(e) {
    this.props.onInStockChange(e.target.checked);
  }
  
  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={this.props.filterText}
          onChange={this.handleFilterTextChange}
        />
        <p>
          <input
            type="checkbox"
            checked={this.props.inStockOnly}
            onChange={this.handleInStockChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }
}

export default SearchBar;

Changed to function based as:

import React, { useState } from 'react';

function SearchBar(props){
  
  const [filterText,setOnFilterTextChange] = useState('');
  const [inStockOnly,setOnInStockChange] = useState(false);
      
  
  
  const handleFilterTextChange=(e)=> {
    setOnFilterTextChange(e.target.value);
  }
  
  const handleInStockChange=(e)=> {
    setOnInStockChange(e.target.checked);
  }
  
  
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={props.filterText}
          onChange={handleFilterTextChange}
        />
        <p>
          <input
            type="checkbox"
            checked={props.inStockOnly}
            onChange={handleInStockChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  
}

export default SearchBar;

Answer 1

I think you are making this much more complicated than necessary.
You are getting the callbacks from props here, right?
Just use them. No need for useState() at all.

function SearchBar(props){
    const { onFilterTextChange, onInStockChange, filterText, inStockOnly } = props;
  
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={filterText}
          onChange={(e) => onFilterTextChange(e.target.value)}
        />
        <p>
          <input
            type="checkbox"
            checked={inStockOnly}
            onChange={(e) => onInStockChange(e.target.checked)}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  
}

Answer 2

return (
    <form>
        <input
            type="text"
            placeholder="Search..."
            value={filterText}
            onChange={(e) => handleFilterTextChange(e)}
        />
        <p>
            <input
                type="checkbox"
                checked={inStockOnly}
                onChange={(e) => handleInStockChange(e)}
            />{" "}
            Only show products in stock
        </p>
    </form>
);

States can be accessed automatically inside the component without using props.