Breaking News: Grepper is joining You.com. Read the official announcement!

spread and rest operator props in React.js

M Hassan khan answered on January 28, 2023 Popularity 9/10 Helpfulness 2/10

answer spread and rest operator props in React.js

spread and rest operator props in React.js

Comment

ReactJS - Spread Operator
1. Passing React Props Using Spread Operator in JSX

function App() {
  return <User id="1" name="Ashok Kumar" />
}

By using spread operator, you can write this code like,

function App() {
  const user = {id: 1, name: 'Ashok Kumar'};

  return <User {...user} />
}

Inside User component you can get these values in props.

2. For setting state: first of all, we take a copy of data and then we make the changes and then pass this updated data to set state function.

this.setState(state => ({
  user: {
    ...state.userState,
    name: 'Anil Kumar'
  },
}));

Or

let userCopy = {...user};
userCopy.name = 'Anil Kumar';
this.setState(userCopy);

ReactJS - Rest Parameter
<User id={1} name={'Ajay'} customStyle={'some_property'}>Hello User</User>

const User = ({ customStyle, ...rest }) => {
  // Here customStyle will get some_property in it
  // Apart from customStyle all other props (id, name) 
  // will be available in rest
}

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: www.includehelp.com

Tags: javascript object-destructuring partial rest spread

Link to this answer
Share Copy Link

Contributed on Jan 28 2023

M Hassan khan

0 Answers Avg Quality 2/10

spread and rest operator props in React.js

Contents

More Related Answers

spread and rest operator props in React.js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.