Passing object as props to jsx

by

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} />

More Related Contents:

  1. Dynamic tag name in React JSX
  2. forEach() in React JSX does not output any HTML
  3. React: Expected an assignment or function call and instead saw an expression
  4. You should not use outside a
  5. Set loading state before and after an action in a React class component
  6. Cannot use JSX unless the ‘–jsx’ flag is provided
  7. Visual studio code changes format (React-JSX)
  8. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  9. How do I type this ‘as’ JSX attribute in TypeScript?
  10. How to define css variables in style attribute in React and TypeScript
  11. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  12. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes
  13. We simply cannot write “ in ReactJS?
  14. Error : Cannot read property ‘map’ of undefined
  15. How do I hide API key in create-react-app?
  16. Clear and reset form input fields
  17. How to resolve “Cannot use import statement outside a module” in jest
  18. Hide keyboard in react-native
  19. React app exiting in docker container with exit code 0
  20. useNavigate() may be used only in the context of a component
  21. Testing React components that fetches data using Hooks
  22. Trace why a React component is re-rendering
  23. How to hash CSS class names in Nextjs?
  24. How can I use Fabric.js with React?
  25. Change language to JSX in Visual Studio Code
  26. React 16 warning “warning.js:36 Warning: Did not expect server HTML to contain a in .”
  27. How to bundle a React app to a subdirectory on a server?
  28. How to test Async Storage with Jest?
  29. Children won’t render when using a layout in ReactJS
  30. How do I window removeEventListener using React useEffect

Leave a Comment