Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass all other props to react class?

Say I have 3 props that my class based component requires and implements i.e.

<Component propOne={this.props.one} propTwo={this.props.two}>   {this.props.children} </Component> 

how would I pass down any other props that I originally don't expect, but say someone else using my component would want to use?

I was thinking

<Component propOne={this.props.one} propTwo={this.props.two} {...this.props} >   {this.props.children} </Component> 

But am concerned about prop duplication

like image 387
Ilja Avatar asked Jan 08 '17 15:01

Ilja


People also ask

How do I pass multiple props in Reactjs?

Method 1: We can make a separate method for the event and call all the props method in that method. Method 2: We can create an anonymous function and call all the props method inside the anonymous method.

How do I import props in React?

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App. jsx'; ReactDOM. render(<App headerProp = "Header from props..." contentProp = "Content from props..."/>, document.


1 Answers

Use spread syntax:

const {propOne, propTwo, ...leftOver} = this.props; // `leftOver` contains everything except `propOne` and `propTwo` 

So your example would become:

const { propOne, propTwo, children, ...props } = this.props;  <Component propOne={propOne} propTwo={propTwo} {...props}>     {children} </Component> 

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Source: MDN

like image 81
Kousha Avatar answered Sep 20 '22 15:09

Kousha