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
- How to change an object value of a state array by using a specific array index
- How to deploy create-react-app to subdirectory on a server
- React Native Docs Example with ES6
- how can I put a logic in map array method. I have sent title as props and except props title I want to render other title
- Will having too many conditionals break a HOC in React?
- How to pass function as a prop in react typescript
- Convert values from input box from a string into an array using react-hook-form
- Object Arrays map values inside for/foreach loop to print the JSX
- Compile a JSX string to a component on the fly
- React i18next not working on Firefox/Microsoft Edge browser?
- React Create a Horizontal Divider with Text In between
- Using this.setstate with Fetch API
- Regex pattern match validation for form does not work in ant.design
- React - Why i assign scrollTop and the element don't get this?
- How to set state and load the information before render with firebase?
- Attempted import error: 'react-table' does not contain a default export (imported as 'ReactTable')
- Auto-scaling input to width of value in React
- Test Firebase authenticate Using Google Sign-In in jest
- React.js: Example in tutorial not working
- How to pass values between functional components in ReactJS- output [object Object]?
- Is there a workaround as to how to return inside a conditional statement in a React component?
- Unhandled Rejection (TypeError): this.setState is not a function
- How to resolve "module not found" in Reactjs?
- How to create a searchable componenent in React
- key error when trying to make a auth api "post request
- Redux state is not uniform across all tabs
- Syntax to add dynamic parameter in react js
- useEffect. Find the parent component that defines it and wrap that definition in useCallback
- ternary operator is not listening to local state
- JSX onClick keeps evaluating, InternalError: too much recursion