Trying to make a sub page (channel) in reactjs

Question

I am trying to make the user able to create channels in my web app.

If you the see image below, there is a modal that take the input and use

that as the id of the page that will newly created.

My route is specified as:

require('./styles/main.scss');

render(

    <Router> 
        <div>
            <Route exact path="/" component={Home}/>
            <Route exact path="/RecTest" component={RecTest}/>
            <Route exact path="/Example" component={Example}/>
            <Route path="/channels/:id" component={ (props) => (<Channel {...props}/>)} />
        </div>
    </Router>,

    // Define your router and replace <Home /> with it!
    document.getElementById('app')
);

And the modal is coded as:

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() {
        <Link to={{ pathname: '/channels/' + this.state.channelName }}></Link> 
    }


    render(){
        return(

            <div className="ui active modal">
                <div className="header">Create a New Channel</div>
                <div className="loginbody">
                    <div className="fillout">
                        <div className="channelName">
                            <span>Channel Name: </span>                            
                            <Input
                                onChange = { this.inputChangeHandler }
                                placeholder="Channel Name"
                                label = "Channel Name"
                                value = { this.state.channelName } />
                        </div>
                    </div>
                    <Button onClick = { this.clickHandler }>
                        SUBMIT
                    </Button>
                </div>
            </div>
     )
    }
}

export default MakeChannelModal

I was assuming this to take the channel name input and direct the page to a Channel component with the id of df.

My Channel component is just blank right now.

The thing is, if I click SUBMIT in the modal, it does not do anything.

Doesn't even show an error.

What am I doing wrong?

score 1 · Accepted Answer · answered Dec 06 '17 at 19:11

clickHandler() should be a function that changes pathname, making Router to draw another component, but it tries to draw React component by itself instead (not quite successfully though, because this function doesn't actually returns anything).

I believe you should either use props.history.push() in onClick(), or make <Button /> a <Link />.

Solution 1: (preferable, if you want a <Button>)

Replace your clickHandler() with this:

clickHandler() {
  this.props.history.push('/channels/' + this.state.channelName);
}

Solution 2: (still would work)

Replace your <Button ... /> component with this:

<Link to={{ pathname: '/channels/' + this.state.channelName }}>
  SUBMIT
</Link>

SO answer about history.push(): https://stackoverflow.com/a/43298961/6376451

Thanks for the answer. It does take me to the /channels/id link, but nothing appears in my new page even though I added stuffs in my Channel component. — Dawn17, Dec 07 '17 at 00:39
Debugging will probably require more code, specifically Channel component. While testing I just did a dummy and it worked. — kengho, Dec 07 '17 at 10:01

Trying to make a sub page (channel) in reactjs

1 Answers1