score:197
you were close with your idea. it turns out that passing undefined
for a prop is the same as not including it at all, which will still trigger the default prop value. so you could do something like this:
var parent = react.createclass({
proptypes: {
editable: react.proptypes.bool.isrequired,
editableopts: react.proptypes.shape({...})
},
render: function() {
return <child
editable={this.props.editable ?
this.props.editableopts :
undefined}
/>;
}
});
score:0
var parent = react.createclass({
proptypes: {
editable: react.proptypes.bool.isrequired,
editableopts: react.proptypes.shape({...})
},
render: function() {
return (
<child
{...(this.props.editable && {editable=this.props.editableopts})}
/>
);
}
});
this passes the props if they are defined. else the props are not passed. in the other answer's the props are still passed but the value is undefined
which still means the props are being passed.
score:0
hey i might be late to jump in but i want to share a small tip. in case you are here for the reason that you want to pass props dynamically. then you can use * sign to import all the stuff as an alias , i.e in this case as grs then the imports will be in an object, then you can use that object to pass props dynamically. hope this will help some of you.
import * as grs from "../components/theme";
import react from "react";
const gridinput = ({ sp, ...props }) => {
return (
<grid {...grs[`gr${sp}`]}>
<input {...props} />
</grid>
);
};
export default gridinput;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
score:1
also you can try this short hand way
<child {...(this.props.editable && { editable: this.props.editableopts })} />
score:11
actually, if your prop is boolean it isn't needed to implement condition but if you wanna add prop by inline condition you should write like below:
const { editable, editableopts } = this.props;
return (
<child {...(editable && { editable: editableopts } )} />
);
hope it doesn't confuse you. the {...
means it is spread operator like passing existed props: {...props}
and the editable &&
means if editable
is true
the { editable: editableopts }
object will make and with {...
we will make a new object like it: {...{ editable: editableopts }}
that it means editable={editableopts}
but if this.porps.editable
is true.
score:22
define props
variable:
let props = {};
if (this.props.editable){
props.editable = this.props.editable;
}
and then use it in jsx:
<child {...props} />
here is a solution in your code:
var parent = react.createclass({
proptypes: {
editable: react.proptypes.bool.isrequired,
editableopts: react.proptypes.shape({...})
},
render: function() {
let props = {};
if (this.props.editable){
props.editable = this.props.editable;
}
return (
<child {...props} />
);
}
});
source, react documentation: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes
score:69
add a spread operator to the this.props.editable
:
<child {...(this.props.editable ? {editable: this.props.editableopts} : {})} >
should work.
Source: stackoverflow.com
Related Query
- React: inline conditionally pass prop to component
- Pass an inline SVG as React component prop
- Conditionally inline style a react component based on prop
- Conditionally pass a Boolean prop with a dynamic prop name to a React component
- Conditionally pass prop into component in React
- React - How to pass props to a component passed as prop
- Test React component method is calling function pass as a prop
- using css modules in react how can I pass a className as a prop to a component
- React Native pass function to child component as prop
- How to pass a React component as a prop
- How do I pass a Prop to a Navigation Screen Component - React Native
- Pass Children prop to React Memo component
- When do i need to pass prop to constructor of a react component using super(props)?
- How to dynamically decide to pass a prop to a react component or not?
- Pass CSS variable as prop to the react component
- Using React Hooks, when I pass down a prop from parent to a child component, the prop in the child component is undefined
- How to pass React Component prop to child function using {children}?
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- Set value of prop in child component and pass value back to state of app.js, react
- How to conditionally pass optional props to component when we use React with Typescript?
- Wrong pass prop in react component
- How do I pass a prop to a react component yet not update that prop in the child when parent changes?
- Interpolate React Link component and pass it as a prop
- Pass a default prop inside function component in react js
- Passing a state or prop to pass a value to child component in react
- pass exclamation mark as prop value in react component
- How can I pass a function as a prop to a React component using react-router <Redirect />?
- Alternative to nested ternary expressions in my React component to pass prop value condionally
- React pass prop to other component to delete from state array
- How do I pass a component as a prop in React and Typescript?
More Query from same tag
- golang net/http give 404 error when trying to call other route that isn't /
- React not rendering component within if block
- Deleting component from array not working unless wrapped in div
- React component show only with new search?
- Lingui: Error: Objects are not valid as a React child (found: object with keys {id})
- React ignoring Path causing wrong menu to show
- How to set waitFor options globally in React Testing Library?
- How to force user to exit app with react-router-dom
- react-resize-observer returns null values with Bootstrap modal
- When I try to use Parcel to build a production version of a React app that works fine in development mode, I get "Cannot find module 'sass'"
- migrating php app to react with SSO
- Enzyme 3 not working with React 16
- How to show loader while API status is pending in React JS
- React createSlice's extraReducers's state access
- Fetching data from API and react-router-dom on refresh / direct link
- Multiple sizeColumnsToFit() ag-grid React
- Live search with pagination in React.js
- React Prop does not have value, cannot console log
- cant get data from form to server - MERN
- Building a referral system using Node/React/MongoDB
- How to get title from any link using react js?
- How to return values from UseEffect Hook
- React - setState of child from parent component
- Update state with Nested object in Form
- How to properly write types for an array of generic React components and their properties?
- React Boostrap Overlay
- React Router and Links all directing to the same page?
- React Component doesn't load even if I write exact path in the browser as defined in the routes
- My CSS grid layout causes horizontal scroll and I can't figure out why
- Load JSON by email in React