Dynamic links firebase UI - reactjs

Question

I want to render a list of restaurants inside select tag with options so that the user can choose a restaurant.
What i try so far:
class Banner extends Component {
this.state = {
restaurant: "",
}
restaurantlist = () => {
var res=[]
var { restaurants } = this.props;
restaurants = restaurants.filter(rest => {
return rest.name.toUpperCase().indexOf(this.state.restaurant.toUpperCase()) !== -1 &&
rest.publish === true })
console.log(restaurants)
res = restaurants.map((item) => (
<li key={item.id}>{item.name}</li>))
return res;
}
<input onChange={(e)=>{ const restaurant = e.target.value;
this.setState({restaurant:restaurant})}}
type="text" name="restaurant" className="res__search"
placeholder="Restaurant"
/>

Answer 1

First you need some corrections with state:
this.state = {
restaurants: [],
// ...
}
You need restaurants as Array not as String.
This is a basic implementation of Select/Option with React:
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
restaurants: [
{ id: 1, name: 'First' },
{ id: 2, name: 'Second' },
{ id: 3, name: 'Third' }
],
selected: 2,
};
}
handleChange = e => {
this.setState({
selected: e.target.value,
})
}
render() {
return (
<div>
<select value={this.state.selected} onChange={this.handleChange}>
{this.state.restaurants.map(x => <option value={x.id}>{x.name}</option>)}
</select>
<h4>State:</h4>
<pre>{JSON.stringify(this.state, null, 2)}</pre>
</div>
);
};
}
React.render(<Test />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.9/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.9/react-dom.min.js"></script>
<div id="app"></div>
Note:
Please read React documentation and also take a look at this example