Menu
I have an object contains multiple common key-value props, that I want to pass on to some jsx. Something like this:
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'}; <MyJsx commonProps /> I want this to function as passing individual props:
<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/> Is this possible?
699
Use the spread syntax (...) to pass an object as props to a React component, e.g. <Person {... obj} /> . The spread syntax will unpack all of the properties of the object and pass them as props to the specified component.
You can pass data in React by defining custom HTML attributes to which you assign your data with JSX syntax. So don't forget the curly braces. }export default App; As you can see, the props are received in React's class component via the this instance of the class.
To pass an object as props to a component in React TypeScript: Define an interface for the type of the object. Pass an object of the specified type to the child component, e.g. <Employee {... obj} /> .
To pass an array as a prop to a component in React, wrap the array in curly braces, e.g. <Books arr={['A', 'B', 'C']} /> . The child component can perform custom logic on the array or use the map() method to render the array's elements.
Is this possible?
Yes its possible, but the way you are sending it is not correct.
The meaning of <MyJsx commonProps /> is:
<MyJsx commonProps={true} /> So if you don't specify any value, by default it will take true. To pass the object, you need to write it like this:
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'}; <MyJsx commonProps={commonProps} /> Update:
If you have an object and want to pass all the properties as separate prop, write it like this:
<MyJsx {...commonProps} /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
