无法将道具传递给组件

Question

Using Material UI, Table Component . All that has been imported in the Root component. The problem I'm running into is passing properties to the child component <UserList /> . I can pass users but that's it.

My error is props are undefined , which means I'm not passing anything to the child, but how can I pass users but not showCheckboxes ? What am I missing here?

User container

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { fetchUsers } from '../actions/usersActions';
import UsersList from '../components/users/UsersList';

export default class Users extends Component {
  componentDidMount(){
    this.props.dispatch(fetchUsers(''));
  }
  render(){
    const showCheckboxes = 'false';
    return(
      <div>
        <UsersList users={this.props.users} showCheckboxes={showCheckboxes}/>
      </div>
    );
  }
}

Userslist

import React from 'react';
import {Table, TableBody, TableFooter, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';

export default function UsersList({ users }, props) {
  const emptyMessage = (
    <p>There are no users</p>
  );
  const usersList = users.map( user =>
    <li key={user.id}>{user.name}</li>
  );

  return (
    <div>
      <Table>
        <TableHeader displaySelectAll={this.props.showCheckboxes}>
          <TableRow>
            <TableHeaderColumn>ID</TableHeaderColumn>
          </TableRow>
        </TableHeader>
      </Table>
      {users.length === 0 ? emptyMessage : usersList}
    </div>
  );
}

Answer 1

As official docs say:

This function is a valid React component because it accepts a single "props" object argument with data and returns a React element.

So your component should look like this:

import React from 'react';
import {Table, TableBody, TableFooter, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';

export default function UsersList(props) {
  const emptyMessage = (
    <p>There are no users</p>
  );
  const usersList = props.users.map( user =>
    <li key={user.id}>{user.name}</li>
  );

  return (
    <div>
      <Table>
        <TableHeader showCheckboxes={props.showCheckboxes}>
          <TableRow>
            <TableHeaderColumn>ID</TableHeaderColumn>
          </TableRow>
        </TableHeader>
      </Table>
      {props.users.length === 0 ? emptyMessage : usersList}
    </div>
  );
}