0

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;
4
  • github.com/RUJodan/Source-React/blob/master/src/index.jsx here's an example on how I use react-router-4. I don't know if it's because you're not returning the component, but if you aren't passing any props, I'd simply the <Route exact path="/" component={vCardForm} />. Also, I don't know if the Switch covers it, but shouldn't it be wrapped in a <Router> component? Commented Sep 5, 2017 at 22:21
  • 2
    You need to capitalize the component name to VCardForm or it will be interpreted as an html tag - stackoverflow.com/questions/30373343/… Commented Sep 5, 2017 at 22:24
  • You MUST start a component name with a Captial letter. Commented Sep 5, 2017 at 22:30
  • @TestWell ah... cant believe i missed that one! Thank you, that solved the missing component issue Commented Sep 5, 2017 at 22:51

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.