I've been refactoring a small application that was initially within one file into it's own separate ponents. Currently I have a child ponent UsersTable that I am rendering within the parent Users2. I am passing some dummy data from the parent as props to the child but am getting the lovely Cannot read property 'map' of undefined.

I am using react hooks and passing props with the spread operator in the parent:

<UsersTable {...columns} {...data} />

And the child is receiving that here:

    export const UsersTable = props => {
  const [usersState, setUsersState] = useState(props)

  useEffect(() => {
    setUsersState(props)
  }, [props])

  const renderUsers = () => {
    if (usersState) {
      return usersState.map(d => items(d))
    } else {
      return noData
    }
  }

As well as down in the return function here:

<ActionList columns={usersState}>{renderUsers}</ActionList>

I am specifically trying to figure out why the data prop (an array of objects), is returning undefined. Linking my sandbox here. I wondering if the issue is perhaps related to passing multiple separate props via spread operators.

Any help or advice around what I am trying to acplish would be much appreciated!

I've been refactoring a small application that was initially within one file into it's own separate ponents. Currently I have a child ponent UsersTable that I am rendering within the parent Users2. I am passing some dummy data from the parent as props to the child but am getting the lovely Cannot read property 'map' of undefined.

I am using react hooks and passing props with the spread operator in the parent:

<UsersTable {...columns} {...data} />

And the child is receiving that here:

    export const UsersTable = props => {
  const [usersState, setUsersState] = useState(props)

  useEffect(() => {
    setUsersState(props)
  }, [props])

  const renderUsers = () => {
    if (usersState) {
      return usersState.map(d => items(d))
    } else {
      return noData
    }
  }

As well as down in the return function here:

<ActionList columns={usersState}>{renderUsers}</ActionList>

I am specifically trying to figure out why the data prop (an array of objects), is returning undefined. Linking my sandbox here. I wondering if the issue is perhaps related to passing multiple separate props via spread operators.

Any help or advice around what I am trying to acplish would be much appreciated!

• javascript
• reactjs
• react-hooks
• react-props
• react-ponent

• Are you sure it shouldn’t be columns=columns? Can you share the data structure of columns? – JBallin Commented Jul 10, 2020 at 18:15
• Does this answer your question? Is this a good way to pass props to child ponent in React? – Michael Freidgeim Commented Aug 22, 2021 at 2:21

4 Answers 4

That's not a correct way to pass down props.

Props are passed as properties of an object and hence you need to define a name and value to it.

For ex, you need to write,

<UsersTable {...columns} {...data} /> 

as

<UsersTable columns={columns} data = {data} />

Now the UserTable ponent will get this props object,

props = { 
columns=the column data,
data = the data
}

To use this props, you can use destructuring

const {data, columns} = props;

or you can use the dot notation, props.column & props.data

You need to pass by attribute

<UsersTable columns={...columns} data={...data} /> /*<-- Changes */

export const UsersTable = props => {
  const [usersState, setUsersState] = useState(props)

  useEffect(() => {
    setUsersState(props)
  }, [props])

  const renderUsers = () => {
    if (usersState) {
      return usersState.map(d => items(d))
    } else {
      return noData
    }
  }

<ActionList columns={usersState}>{renderUsers}</ActionList>

In User2 ponent, import UsersTable ponent need change from this:

<UsersTable {...columns} {...data} />

to this:

<UsersTable columns={columns} data={data} />

And in UserTable ponent you need to change:

const [usersState, setUsersState] = useState(props)

to:

const [columns, setColumns] = useState(props.columns)
const [users, setUsers] = useState(props.data)

renderUsers will be:

  const renderUsers = () => {
    if (users) {
      return users.map(d => items(d))
    } else {
      return noData()
    }
  }

And last, import ActionList ponent like this:

<ActionList columns={columns}>{renderUsers()}</ActionList>

After that, UsersTable ponent will working fine.

Parent Component:

<UsersTable columns={columns} data={data} />

See my github for an example of how to use hooks and props in a similar way:

https://github./RyanJMorris11/helloReactHooks/blob/master/src/ponents/userList.js