Child component not rendering [duplicate]

Question

I can't for the life of me work out why my component isn't rendering in the page at all, well its rendering as <signinform></signinform>. I am using react-form but I don't think this has anything to do with it not rendering.

signin.js

import React from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom'
import {BlockForLoggedInUsers} from '../shared/auth/userRedirects'
import Logo from '../shared/logo';
import userStyles from '../shared/userPages/userPages.css';
import showResults from './showResults';
import signInForm from './signInForm';

class SignIn extends React.Component {
  constructor(props) {
    super(props);
  }

  render(){
    return (
      <div className={userStyles.home}>
        <BlockForLoggedInUsers />
        <Logo />
        <signInForm onSubmit={showResults}/>
        <div className={userStyles.extraDetails}>
          <NavLink to="/signup">Don't have an account yet?</NavLink>
          <NavLink to="/skip" className={userStyles.extraDetailsRight}>Skip</NavLink>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { user: state.user };
}

export default connect(mapStateToProps)(SignIn);

signInForm.js

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const signInForm = props => {
  const { handleSubmit, pristine, submitting } = props;
  return (
    <div>
      <form role="form" onSubmit={handleSubmit}>
        <Field name="email" component="input" type="text" placeholder="Enter email address"/>
        <button type="submit"  disabled={pristine || submitting}>Sign In</button>
      </form>
    </div>
  );
};

export default reduxForm({
  form: 'signInForm',
})(signInForm);

HTML Output

I think the problem here can be solved with this answer stackoverflow.com/questions/41216654/… — Shubham Khatri
– Shubham Khatri, Commented Jun 3, 2017 at 12:33

Bartek Fryzowicz · Accepted Answer · 2017-06-03 12:34:38Z

0

React components names should be capitalized - so just change component name from signInForm to SignInForm. Please check react doc for more details.

answered Jun 3, 2017 at 12:34

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

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

2 Comments

Jamie Hutber Over a year ago

Bingo! Easy correct answer there :D

Shubham Khatri Over a year ago

@JamieHutber, Its a duplicate of the above answer then :)

Collectives™ on Stack Overflow

Child component not rendering [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related