How to use Spread Operator In ReactJS
The … operator is called a spread operator. The spread operator in this case concatenates both the objects into a new object. Below is the implementation of merging multiple inline styles using the spread operator.
Example: Below is the basic example of the spread operator.
Javascript
import React from 'react';const text= { color: 'green', fontSize: '50px', textAlign: 'center'}const background = { background: "#e0e0e0"}export default function App(){ return ( <div style={{...text,...background}}> <h1>w3wiki</h1> </div> )} |
Output:
How to merge multiple inline style objects ?
In this article, we will learn about the Multiple inline styles. Multiple inline styles can be merged in two ways both ways are described below:
Table of Content
- Using Spread operator:
- Using Object.assign():