"ScrollView" like component in React JS?

Question

I am displaying search results in my app as an unordered list. This works fine when there are like 5 search results, but as soon as I start getting 10-20 results, the list starts growing more and more down the page. I would like to avoid having to scroll down in the entire webpage just to see the contents lower in the list. Is there something like a scroll view where I can define a certain height and then users can scroll inside of the container?

My current code:

class SearchResults extends Component {
    render() {
        return (
            <div style={styles.wrapperDiv}>
                <div style={styles.resultsLeft}>
                    <ul style = {{ listStyleType: "none" }}>
                        <Result results={this.props.results}/>
                    </ul>
                </div>
                <div style={styles.mapRight}>
                    <GoogleMap/>
                </div>
            </div>
        );
    }
}

Answer 1

You can try giving the parent container (wrapperDiv) a height, say 500px and also set overflow-y to be scroll:

<div styles={{ height: '500px', overflowY: 'scroll' }} style={styles.wrapperDiv}>
  ...
</div>