Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Transfer { ..this.props } but exclude certain ones

Tags:

Is it possible to transfer props down to child component where { ..this.props } is used for cleaner easier syntax, however exclude certain props like className or id?

like image 407
Ilja Avatar asked Sep 06 '16 15:09

Ilja


People also ask

How do you bypass data props?

export default App; Basically that's how props are passed from component to component in React. As you may have noticed, props are only passed from top to bottom in React application's component hierarchy. There is no way to pass props up to a parent component from a child component.

How do you transfer props from one component to another?

Sending state/props to another component using the onClick event: So first we store the state/props into the parent component i.e in which component where we trigger the onClick event. Then to pass the state into another component, we simply pass it as a prop.

How do you pass remaining props in React?

Passing Props from Parent to Child in React If you happen to know all of the props, then you could pass them all by just listing them out individually as the new props for the child component.

Is it possible to use this props in getInitialState?

Using props to generate state in getInitialState often leads to duplication of "source of truth", i.e. where the real data is. This is because getInitialState is only invoked when the component is first created.


1 Answers

You can employ destructuring to do this job:

const { className, id, ...newProps } = this.props; // eslint-disable-line // `newProps` variable does not contain `className` and `id` properties 

Since this syntax is currently ECMAScript proposal (Rest/Spread Properties) you will need to transpile code to enable this feature (e.g. using babel).

like image 134
madox2 Avatar answered Oct 08 '22 03:10

madox2