title: Trying to make a sub page (channel) in reactjs
body: <p>I am trying to make the user able to create channels in my web app.</p>
  
  <p>If you the see image below, there is a modal that take the input and use </p>
  
  <p>that as the id of the page that will newly created.</p>
  
  <p><a href="https://i.stack.imgur.com/v1XIP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v1XIP.png" alt="enter image description here"></a></p>
  
  <p>My route is specified as:</p>
  
  <pre><code>require('./styles/main.scss');
  
  render(
  
      &lt;Router&gt; 
          &lt;div&gt;
              &lt;Route exact path="/" component={Home}/&gt;
              &lt;Route exact path="/RecTest" component={RecTest}/&gt;
              &lt;Route exact path="/Example" component={Example}/&gt;
              &lt;Route path="/channels/:id" component={ (props) =&gt; (&lt;Channel {...props}/&gt;)} /&gt;
          &lt;/div&gt;
      &lt;/Router&gt;,
  
      // Define your router and replace &lt;Home /&gt; with it!
      document.getElementById('app')
  );
  </code></pre>
  
  <p>And the modal is coded as:</p>
  
  <pre><code>class MakeChannelModal extends Component {
  
      constructor(props){
          super(props);
          console.log("constructor");
          this.state={
              channelName: ''
          }
  
          this.clickHandler = this.clickHandler.bind(this);
          this.inputChangeHandler = this.inputChangeHandler.bind(this);
      }
  
      inputChangeHandler(event) {
  
          this.setState({
              channelName: event.target.value
          })
      }
  
      clickHandler() {
          &lt;Link to={{ pathname: '/channels/' + this.state.channelName }}&gt;&lt;/Link&gt; 
      }
  
  
      render(){
          return(
  
              &lt;div className="ui active modal"&gt;
                  &lt;div className="header"&gt;Create a New Channel&lt;/div&gt;
                  &lt;div className="loginbody"&gt;
                      &lt;div className="fillout"&gt;
                          &lt;div className="channelName"&gt;
                              &lt;span&gt;Channel Name: &lt;/span&gt;                            
                              &lt;Input
                                  onChange = { this.inputChangeHandler }
                                  placeholder="Channel Name"
                                  label = "Channel Name"
                                  value = { this.state.channelName } /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;Button onClick = { this.clickHandler }&gt;
                          SUBMIT
                      &lt;/Button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
       )
      }
  }
  
  export default MakeChannelModal
  </code></pre>
  
  <p>I was assuming this to take the channel name input and direct the page to a <code>Channel</code> component with the id of <code>df</code>.</p>
  
  <p>My Channel component is just blank right now.</p>
  
  <p>The thing is, if I click SUBMIT in the modal, it does not do anything.</p>
  
  <p>Doesn't even show an error.</p>
  
  <p>What am I doing wrong?</p>