Next.js props of Input field are undefined-CodePudding

I am trying to create a SearchBar with an input field that updates the prop "value" with the user's input, however, the value and changeInput props return undefined. Could someone please help?


const SearchBar = (value, changeInput) => {
  return (
    <div>
      <div className="flex items-center border-b-[1px] py-6 px-4 border-gray-400 border-solid">
        <MagnifyingGlassIcon className="w-6 h-6 mr-8 stroke-gray-400 " />
        <input
          className="w-full text-2xl placeholder-gray-400 border-none outline-none"
          type="text"
          placeholder="Search..."
          value={value}
          onChange={changeInput}
        />
      </div>
    </div>
  );
};

export default SearchBar;

CodePudding user response：

Hey you need to destructure the props adding {} like this:

const SearchBar = ({value, changeInput})

or use props

const SearchBar = (props) and then get those props like this:

props.value
props.changeInput