score:2
Accepted answer
i have yet to try this but something like this should do the trick.
const conditionalprops = shouldhaveprops ? {something: somethingistrue} : {};
<mycomponent {...conditionalprops} />
score:1
you can make use of the dynamic expression in jsx for the desired result
<mycomponent {...(somethingistrue ? {something:somethingistrue} : {})}/>
score:1
1) you can do as:
live demo
const something = true;
const props = something ? { something: something } : null;
return <mycomponent {...props} />;
2) you can toggle component with pass argument if something
is truthy
live demo
const something = true;
return something
? <mycomponent something={something} />
: <mycomponent />;
Source: stackoverflow.com
Related Query
- add prop base on condition to react component?
- How to add a prop to super React component in TypeScript?
- react typescript component set prop with condition
- react add event listener base on condition
- change react component typing base on a prop
- Add component props if condition in React
- I have an <Add /> component that is called in two different pages, but only one of them is receiving the add count prop passed to it in React JS
- Can I add a key prop to a React fragment?
- Re-render React component when prop changes
- How to fetch data when a React component prop changes?
- React - How to pass props to a component passed as prop
- How to test a prop update on React component
- React TypeScript HoC - passing Component as the prop
- React w/hooks: prevent re-rendering component with a function as prop
- How to add scroll event in react component
- How can I add properties to a react component passed as a variable?
- Test React component method is calling function pass as a prop
- Add SVG markup to React component
- using css modules in react how can I pass a className as a prop to a component
- Typing React components in Flow when passing a component as a prop
- How do I add React component on button click?
- React Typescript: add location state to react router component
- React TypeScript component with two different prop interfaces
- Component which prop must be an array of specific React elements
- How to add Event in React Functional Component
- React Native pass function to child component as prop
- Add style from props to existing component styles in React Native
- Add AddThis to React component
- How to add Stripe.js script in React component
- Typing a React component that clones its children to add extra props in TypeScript
More Query from same tag
- Refresh Page when logging in
- How to write right regular expression for my Route path in React JS
- is it possible to custom the image size of dangerouslySetInnerHTML in react
- Style html elements dynamically based on id
- I have React application running in ASP.NET Core project and want to run both at the same time
- Remove SELECT options based on another SELECT selected
- API Request to RAPID API gives StatusCode: 401,
- React - Data not found
- Navigation ul tag binding error in ReactJs
- How to open directly our app in apple store?
- Anchor links in GatsbyJS + React
- Add a prefix into routes on ReactJS
- Call function in other child component when mouse up
- How to authenticate third party domain/origin and get access token
- Open/Closed Principle in ReactJS
- Electron.JS + devtoolsinstaller: 'BrowserWindow.addDevToolsExtension' is deprecated and will be removed. Please use 'session.loadExtension' instead
- How to use CSS inside a React + Material-UI project?
- Correctly bundled image could not be loaded
- Google API won't translate foreign letters.
- Optimizing performance for arbitrarily large number of inputs in react
- Loop over keys in a child object and display both key and value
- Alternative to "mostly legacy" ref String Attribute?
- React: Access Data from Redux in component
- Cannot read property 'setState' and TypeError: this.props.items.map is not a function with Axios and Reactjs
- React form onSubmit function not being called
- Initiate a Draft.js Editor with unordered list
- characters.map is not a function
- How to get react component with useReducer to rerender after axios call?
- state update not correctly
- filepond-plugin-image-size-metadata configuration