How to pass props from parent to child in react?

Question

I've been refactoring a small application that was initially within one file into it's own separate components. Currently I have a child component 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 accomplish would be much appreciated!

Are you sure it shouldn’t be columns=columns? Can you share the data structure of columns? — JBallin, Jul 10 '20 at 18:15
Does this answer your question? [Is this a good way to pass props to child component in React?](https://stackoverflow.com/questions/60996121/is-this-a-good-way-to-pass-props-to-child-component-in-react) — Michael Freidgeim, Aug 22 '21 at 02:21

score 3 · Accepted Answer · answered Jul 10 '20 at 18:15

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 component 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

Thank you for the explanation Rohan! Was able to take it from there, appreciate it. — Acenoodles, Jul 10 '20 at 22:32

score 0 · Answer 2 · answered Jul 10 '20 at 18:23

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>

score 0 · Answer 3 · answered Jul 10 '20 at 19:23

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

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

to this:

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

And in UserTable component 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 component like this:

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

After that, UsersTable component will working fine.

hippomano · Answer 4 · 2020-07-10T20:21:10.037

-1

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.com/RyanJMorris11/helloReactHooks/blob/master/src/components/userList.js

edited Jul 10 '20 at 20:21

answered Jul 10 '20 at 18:29

hippomano

79
5

How to pass props from parent to child in react?

4 Answers4