CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-propsreact-component
Acenoodles
Acenoodles

Reputation: 3

How to pass props from parent to child in react?

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!

Upvotes: 0

Views: 16014

Answers (4)

hippomano
hippomano

Reputation: 91

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

Upvotes: 0

Bugatino
Bugatino

Reputation: 73

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.

Upvotes: 0

GMKHussain
GMKHussain

Reputation: 4711

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>

Upvotes: 0

Rohan Agarwal
Rohan Agarwal

Reputation: 2609

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

Upvotes: 3

Related Questions