ReactJS: Unable to get the value from a select dropdown because the value is undefined

I just wanted to make a proof of concept that based on the person’s search text and the option they select from the dropdown it will redirect them to the search engine of their choice.

const options = [
  { value: 'http://www.google.com/search?q=', label: 'Google' },
  { value: 'http://search.yahoo.com/search?p=', label: 'Yahoo' },
  { value: 'https://www.bing.com/search?q=', label: 'Bing' },
  { value: 'https://duckduckgo.com/?q=', label: 'DuckDuckGo' }
]

//const [selection, setSearch] = useState("");


const doSearch = event => {
  event.preventDefault();
  var sf=document.searchform;
  var submitto = sf.sengines[sf.sengines.selectedIndex].value + (sf.searchterms.value);
  console.log("log: " + submitto);
  window.location.href = submitto;
  //window.location.replace(submitto)
  return null;
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Search:</p>
        <form name="searchform" onSubmit={doSearch}>
        <Select id="sengines" options={options}/>
        For:
        <input type="text" name='searchTerms'/>
        <input type="submit" name="SearchSubmit" value="Search"></input>
        </form>
      </header>
    </div>
  );
}

When I hit search it throws an error saying that the selectedIndex is undefined. Is there a syntax mistake I am making that I am unaware of?

Answer

The problem was easier to solve than I realized.

sf.searchTerms.value

Needs to be camel cased

Advertisement

Answer