Child component not rendering

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 https://stackoverflow.com/questions/41216654/react-adding-component-after-ajax-to-view/41216726#41216726 — Shubham Khatri, Jun 03 '17 at 12:33

score 0 · Accepted Answer · answered Jun 03 '17 at 12:34

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 03 '17 at 12:34

Bartek Fryzowicz

6,464
18
27

1

Bingo! Easy correct answer there :D – Jamie Hutber Jun 03 '17 at 12:40
@JamieHutber, Its a duplicate of the above answer then :) – Shubham Khatri Jun 03 '17 at 12:46

Child component not rendering

1 Answers1