Trouble rendering html in react

Question

I've been trying to render html in my react code, however each time I start my page and click 'signup' I get the 'login' view. Is there something wrong with my linking?

App.js

 class App extends Component {
  render() {
    return (
      <div className="App">
         <div className = "loginBox">
      <div className = "glass">
        <img src= {cupcake} className = "user" />
        <h3>Sign in Here</h3>
        <form>
            <div className = "inputBox">
              <input type="text" name="" placeholder="Username" />
              <span><i className="fa fa-user" aria-hidden="true"></i></span>
            </div>
            <div className = "inputBox">
              <input type="password" name="" placeholder="Password" />
              <span><i className="fa fa-lock" aria-hidden="true"></i></span>
            </div>
              <input type="submit" name="" value="Login" />
        </form>

          <a href= "#">Forgot Passwordk?</a>
            <br />
          <a href={'./signup.js'}>Sign up!</a>

      </div>
    </div>
      </div>
    );
  }
}

export default App;

signup.js

class Signup extends Component {
  render() {
    return (
      <div className="Signup">
         <div className = "loginBox">
      <div className = "glass">
        <img src= { cupcake} className = "user" />
        <h3>Signup Here!</h3>
        <form>
            <div className = "inputBox">
              <input type="text" name="" placeholder="Username" />
              <span><i className="fa fa-user" aria-hidden="true"></i></span>
            </div>
            <div className = "inputBox">
              <input type="password" name="" placeholder="Password" />
              <span><i className="fa fa-lock" aria-hidden="true"></i></span>
            </div>
              <input type="submit" name="" value="Login" />
        </form>
        <a href="#">Login!</a>

      </div>
    </div>
      </div>
    );
  }
}

export default Signup;

I keep getting the view of app.js rather than signup.js, any advice will be greatly appreciated. Thank you!

What is your actual requirement? Do you want to render the Signup component within the same page or Do you want to switch another route /signup? — user-developer
– user-developer, Commented Oct 19, 2017 at 4:50

user-developer · Accepted Answer · 2017-10-19 05:04:51Z

1

You can try the following.

// index.js
'use strict';

const React = require('react');
const ReactDOM = require('react-dom');
const { BrowserRouter, Switch , Route } = require('react-router-dom');
const Signup = require('./components/Signup.jsx');
const App = require('./components/App.jsx');

ReactDOM.render((
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={App} />
      <Route path="/signup" component={Signup} />
    </Switch>
  </BrowserRouter>
), document.getElementById('root'));


// App.jsx

...
constructor() {
...
this.handleSubmit = this.handleSubmit.bind(this);
}
...
handleSubmit(event) {
event.preventDefault();
this.props.history.push({
 pathname: '/signup',
 state: { }
});
}
...
<form onSubmit={this.handleSubmit}>
...
</form>
....

edited Oct 19, 2017 at 5:04

answered Oct 19, 2017 at 4:59

user-developer

5864 silver badges7 bronze badges

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

1 Comment

user-developer Over a year ago

Incase if you want to pass props to Signup component, you can push state to history. For instance, if you want to pass message property with value 'Hello', you can simply do this.props.history.push({path: '/signup', state: {message: 'Hello'}});. This message property can be accessed in Signup component from location object {this.props.location.state.message}.

Syed · Accepted Answer · 2017-10-19 04:52:04Z

1

This does not working in react <a href={'./signup.js'}>Sign up!</a>

you need to use react-router-dom. Refer this: https://reacttraining.com/react-router/web/example/basic

answered Oct 19, 2017 at 4:52

Syed

2692 silver badges8 bronze badges

Comments

Drew D. · Accepted Answer · 2017-10-19 04:59:24Z

This is a perfect use case for react-router and the <Link /> component. Here is some example code from their website

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const BasicExample = () => (
  <Router>
     <div>
       <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component=       {Topic}/>
    <Route exact path={match.url} render={() => (
       <h3>Please select a topic.</h3>
    )}/>
  </div>
 )

 const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

export default BasicExample

https://reacttraining.com/react-router/web/example/basic

Collectives™ on Stack Overflow

Trouble rendering html in react

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related