How do you place default message in the semantic react ui search?

Question

https://react.semantic-ui.com/modules/search

Below is images of how the semantic react ui search widget looks like. In the second image, I was wondering how you can put a prompt message to indicate to the user a message on what the search bar is meant for. In this case, it's "search". When the user types in, it erases the Search and starts reflecting what the user is typing. I thought it would be defaultValue, but it seems that you can't have value and defaultValue set at the same time. I still want to be able to read what the set value is when the user types into the box.

Thanks, Derek

Answer 1

You can use defaultValue as initial value in component, no problem. Then read the user input value in event (onBlur for instance) like this:

onBlur(e) {
  e.preventDefault();

  console.log(e.target.name, e.target.value);
}

If you want to read value each new character pressed you can use in onSearchChange event:

onSearchChange(e) {
  e.preventDefault();

  console.log(e.target.name, e.target.value);
}

EDIT: included accepted answer in comment below:

Worked:

placeholder={"text"}

for Semantic React UI Search