An example of a semantic-ui-react search component.

AwesomePopup.js

//Import all the things

class AwesomePopup extends React.Component {
    state = {
        results: [],
        value: ''
    }

    onSearchChange = (e, {value}) => {
        e.setState({value: value})

        //Select all the users whose names or usernames start with the typed in value
        const candidates = this.props.users.filter(u => u.username.startsWith(value) || u.name.startsWith(value))
        //Once they have been filtered map them to values Semantic can understand. Semantic requires a title
        const mappedCandidates = candidates.map(c => {
            return {
                title: c.name,
                description: c.username,
                //Include the rest of the user's props so that we can use them later.
                ...c
            }
        })
        this.setState({results: mappedCandidates})
    }

    onResultSelect = (e, {result}) => {
        //Send the clicked on user up to the parent.
        this.props.selectUser(result)
    }

    render() {
        return <Modal open={this.props.open}>
            <Modal.Header>Select a user to Mention</Modal.Header>
            <Modal.Content>
                <label>Type the username you want to find below</label>
                <Search
                    onSearchChange={this.onSearchChange}
                    onResultSelect={this.onResultSelect}
                    value={this.state.value}
                    results={this.state.results}
                ></Search>
            </Modal.Content>
            <Modal.Actions>
                <Button onClick={this.props.cancelMention}>
                    Cancel
                </Button>
            </Modal.Actions>
        </Modal>
    }
}