Using Constructor(props) without Class Component

Question

I have created a search bar in TypeScript but for now I am unable to type anything into it. All the control component tutorials that I have seen suggest to use constructor(props) or so. If I use it in my code, I get errors.

Is there any way to use it without having a class component?

For instance, I am using a const() for my page. Is there any way I can make the search bar of this functional?

const userSearchPage = () => (
  <div>
    <PermanentDrawerLeft></PermanentDrawerLeft>
    <div className='main-content'>
      <MuiThemeProvider>
        <DropDownMenu >
          <MenuItem style={{ fontSize: "20px" }} primaryText="Search By" />
          <MenuItem value={1} style={{ fontSize: "20px" }} primaryText="First Name" />
          <MenuItem value={1} style={{ fontSize: "20px" }} primaryText="Last Name" />
        </DropDownMenu>
      </MuiThemeProvider>
   <SearchBar
        onChange={() => console.log('onChange')}
        onRequestSearch={() => console.log('onRequestSearch')}
        style={{
          margin: '0 auto',
          maxWidth: 800
        }}
     />
    </div>
  </div>
);

Answer 1

You must use the useState hook in a functional component.

const userSearchPage = () => {
const [value, setValue] = React.useState('');
return (
  <div>
    <PermanentDrawerLeft></PermanentDrawerLeft>
    <div className='main-content'>
      <MuiThemeProvider>
        <DropDownMenu >
          <MenuItem style={{ fontSize: "20px" }} primaryText="Search By" />
          <MenuItem value={1} style={{ fontSize: "20px" }} primaryText="First Name" />
          <MenuItem value={1} style={{ fontSize: "20px" }} primaryText="Last Name" />
        </DropDownMenu>
      </MuiThemeProvider>
      <SearchBar
        onChange={(value) => setValue(value) }
        value={value} 
        onRequestSearch={() => console.log('onRequestSearch')}
        style={{
          margin: '0 auto',
          maxWidth: 800
        }}
      />
    </div>
  </div>
)} ;

Answer 2

Props in functional component's are simply parameters!

function SearchBar (props) {
  let searchbartext = document.getElementById('searchbartext')
  searchbartext.addEventListener('change', (e) => {
    props.onChange(e)
  }
  return ( 
    <form onsubmit={(e) => props.onRequestChange(e)}>
      <input id="searchbartext" style={props.style} />
    </form>
  )
}

const UserSearchPage = () => {
  function onRequestSearch (e) {
    console.log.('request search', e)
  }
  function onChange(e) {
    console.log('onChange')
  }
  return (
  {SearchBar({
        onChange:onChange,
        onRequestSearch:onRequestSearch,
        style:{
          margin: '0 auto',
          maxWidth: 800
        }
     })}
  )
}

Edit: you also have to call functional component's as functions, not with <> syntax like class components. I used the term "props" inside SearchBar(props) but it's just following Reacts naming convention. You could just as easily replace it with SearchBar(bananas).