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

Provisional

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

Lubricous

I don't think that will work codepen.io/anon/pen/EweQjP?editors=1111 . It's not really a default value vs. a message/prompt to the user. The issue is that onBlur doesn't tell you much since the user can type and move off and type some more. You could utilize onSearchChange, but when you set the value at anytime with your default message, what is your triggered that it's was empty. The default message is treated like a real value. Could use a flag, but that seems hacky as well. Also you kind of want a different style for a prompt message vs. an input message for the search bar – Provisional

I see, test with placeholder property: <Search loading={false} results={[]} placeholder={"text"} ... – Lubricous

wow that worked.....didn't think it was supported since i didn't see that in the documentation. Thanks! documentation needs to be updated – Provisional