How a prop of an element can be used for another prop in JSX?-CodePudding

I would like to use the value of a prop in another prop inside of the element, how can it be achived?

<CustomCard customName="foo" customProp={customName} />

CodePudding user response：

You can't directly.

Something that may be helpful to understand is that JSX is just syntactic sugar for plain JavaScript.

<CustomCard customName="foo" customProp={customName} />

// Is equivalent too 

React.createElement(CustomCard, {
  customName: 'foo',
  customProp: customName,
})

(which will not work of course).

You may define a local variable that you will pass to both props though:

const customName = "foo";

return <CustomCard customName={customName} customProp={customName} />