I have 2 Search boxes.
<input type="text" class="main-input main-name" placeholder="Search" />
<Select options={searchOptions} placeholder="Search by" isSearchable/>
2nd is Select component which allows user to choose searching by one of the two options: name or location. The first input is the Searchbox where the user will enter a specific name or location according to the chosen option in Select. And my goal is to change the placeholder of this input based on the chosen option. Currently, the placeholder is Search but once the user chooses name I want to have placeholder="Type the name" or if the chosen is location then display "Type the location", respectively.
const searchOptions = [
{value: 'name', label:'Name'},
{value: 'location', label:'Location'}
];
These are the options given to Select.
In order to store the chosen option I used Usestate, created function for it and updated the Searchboxes. This is how my code looks like :
function Searchbox () {
const [result,setResult]=useState(searchOptions.value)
const setResultHandler = e => {
setResult(e.value);
}
return (
<input type="text" class="main-input main-name" placeholder={{result}="name" ? "Type the Name" : "Type the Location"} />
<Select options={searchOptions} onChange={setResultHandler} placeholder="Search by" isSearchable/>
This gives me error on line where I change the placeholder - TypeError: Assignment to constant variable.
When I try to add {result} below the Searchboxes, it works and I can see the value of the selected option,so it stores the value correctly but it's not working with placeholder. I don't understand what's the problem.