How to render the same component with different props

I'm learning react recently.
I want to render a component with different props again but it doesn't work.

Here is the js code

// page container
class Page extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props.type);
        this.state = {
            type: this.props.type
        }
    } // end of constructor

    render() {
        return (
            <div className={this.state.type}>
            </div>
        );
    } // end of render()

} // end of componenet: page container

function show() {
    ReactDOM.render(<Page type="page1"/>, $("#main")[0]);
}

ReactDOM.render(<Page type="homepage" />, $("#main")[0]);

the html includes a button which will call the show() when clicked.
How to make it render again when I click on the button