React how to store properties list in a variable and pass them to element-CodePudding

I'm sorry if this question has been asked before, but I couldn't find anything on StackOverflow nor Google.

I wanted to know how to store several props in a single variable, and then pass them to the element, if that's even possible.

For example, let's say I have the following props:

classname="..." width="100" height="50

How do I do something like this:

var props= {classname="..." width="100" height="50"}

And then this:

<MyComponent props>

CodePudding user response：

Create an object:

let props= {classname : "..." width : "100" height : "50"}

and just destructure it :

<MyComponent {...props}>

MyComponent gets properties like width, height and className

CodePudding user response：

To declare the props

const props = {
  div: {
    className: "my_class",
    id: "my-id",
    style: {
      textAlign: "center"
    }
  }
}

to add props to an element

<div {...props.div} />