CODEWITHSUNDEEP
reactjsredux
user3162979
user3162979

Reputation: 935

My Stateless Component not rendering (Reactjs and Redux)

For some reason or another, my allEmployees stateless component isn't being rendered and I can't figure out why. I'm getting the following warning:

Unknown prop employeesData on <allEmployees> tag. Remove this prop from the element.

Container

class employeeListPage extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
    employees : {}
 };
}

render(){
  return(
    <div>
        <allEmployees employeesData = {this.props.employees} />
    </div>
  )
}

}
function mapStateToProps(state, ownProps){
 return{
    employees: state.employees
}
}

function mapDispatchToProps(dispatch){
 return {
    employeeActions : bindActionCreators(employeeActions, dispatch)
 };
}

export default connect(mapStateToProps, mapDispatchToProps )(employeeListPage);

allEmployees Component

 const allEmployees = (props) => (
    <div>
     <table>
      <thead>
        <tr>
             <th>Employee Number</th>
             <th>Employee Full Name</th>
             <th>Active Employee</th>
             <th>Origin</th>
             <th>Modify</th>
             <th>Remove</th>
        </tr>
     </thead>
      <tbody>
      {props.employeesData.map( employee => {

                 <tr>
                    <td>{employee.Number}</td>
                    <td>{employee.FullName}</td>
                    <td>{employee.IsActive}</td>
                    <td>{employee.Origin}</td>
                    <td><button>Modify</button></td>
                    <td><button>Remove</button></td>
                 </tr>
      })};
      </tbody>
     </table>
    </div>

);

export default allEmployees;

Upvotes: 3

Views: 2221

Answers (3)

skmvasu
skmvasu

Reputation: 3108

When a component name starts with lowercase, React treats it as a HTML tag. Try changing it to AllEmployees and it should work.

Upvotes: 0

hans
hans

Reputation: 1031

I think you need your component to be pascal case, here is a jsfiddle

const AllEmployees = (props) => (
    <div>
     working because pascal case
    </div>
);


ReactDOM.render(
  <AllEmployees />,
  document.getElementById('container2')
);

You can also try it here, try renaming FormattedDate to formattedDate.

Upvotes: 0

Piotr Berebecki
Piotr Berebecki

Reputation: 7468

When it comes to the warning, have a look at the official React guidance: https://facebook.github.io/react/warnings/unknown-prop.html

This may also be caused by a recent library update. Try using a previous version. More info here: https://stackoverflow.com/a/38177862/4186037

Also, in order to render React components, their names need to start with an upper-case letter: https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

Here is a demo showing that a component starting with a lower-case letter (article2) will not render: http://codepen.io/PiotrBerebecki/pen/YGxRqq

class App extends React.Component {
  render() {
    return (
      <div>
        <Article1/>
        <article2/> 
      </div>
    );
  }
}


// this component will render as it starts with a capital letter
class Article1 extends React.Component {
  render() {
    return (
      <div>
        Article1
      </div>
    );
  }
}


// this component will not render as it starts with a lower case letter
class article2 extends React.Component {
  render() {
    return (
      <div>
        article2
      </div>
    );
  }
}          


ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Upvotes: 6

Related Questions