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

Burak Kaplan 0
Viewed 26

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} />
jsx reactjs
1 Answers

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} />
Gabriel Pichot0
Related