CODEWITHSUNDEEP
javascriptreactjsreact-router-v4
David Moran
David Moran

Reputation: 177

React-Router v4 <Route render={...} /> not displaying component

I'm trying to work though a quick app to get a better undestanding of React-Router v4. Right now my plan is to just have a form one one page that populated a second page based on inputs.

I'm trying to pass two functions, onNameChange and onEmailChange, through the App component down to the vCardForm component. In trying to follow this example: https://github.com/ReactTraining/react-router/issues/4627 I found that my component does not even load using the render={...} property. Below is my code, any help would be appreciated.

components/App/index.js

import React, { Component } from 'react';
import Header from '../Header';
import Main from '../Main';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      email: ''
    }

    this.onNameChange = this.onNameChange.bind(this);
    this.onEmailChange = this.onEmailChange.bind(this);
  }

  onNameChange(event) {
    this.setState({ name: event.target.value })
  }

  onEmailChange(event) {
    this.setState({ email: event.target.value })
  }

  render() {
    return (
      <div className="App">
        <Header />
        <Main />
      </div>
    );
  }
}

export default App;

components/Main/index.js

import React, { Component } from 'react';
import vCardForm from '../vCardForm';

import { Switch, Route } from 'react-router-dom';

class Main extends Component {
  render() {
    const {
      onNameChange,
      onEmailChange
    } = this.props;

    return (
      <main className="App-intro">
        <Switch>
          <Route exact path='/' render={(props) => (
            <vCardForm />
          )} />
        </Switch>
      </main>
    )
  }
}

export default Main;

components/vCardForm/index.js

import React, { Component } from 'react';

class vCardForm extends Component {
  render() {
    return (
      <form>
        <p>
          <label htmlFor="name">Name: </label>
          <input id="name" type="text" placeholder="Name" />
        </p>
        <p>
          <label htmlFor="email">Email: </label>
          <input id="email" type="text" placeholder="Email" />
        </p>
        <p>
          <button type="submit">Submit</button>
        </p>
      </form>
    )
  }
}

export default vCardForm;

Upvotes: 0

Views: 2355

Answers (1)

jonlu
jonlu

Reputation: 21

In your App.js, you aren't passing any props to <Main /> in the render method. Try the same code with:

<Main onNameChange={this.onNameChange} onEmailChange={this.onEmailChange} />

Taking into consideration the previous comments, you should capitalize all components. Then, pass the same props into the render prop of the <Route/>:

<Route exact path='/' render={(props) => (
   <VCardForm {...props}/>
)} />

Also keep in mind that the exact prop on Route means that you need to be on the route / exactly. As in you'll need to be on https://localhost:3000/ assuming you're using port 3000 to serve your app.

Upvotes: 1

Related Questions