Why is it when I assign the props to a JSX variable, it outputs as undefined? Is this normal? Or is there some other code in my program that would be causing this issue?
const { foo } = this.props;
console.log(this.props);
console.log(foo);
class Library extends Component {
componentDidMount() {
M.AutoInit();
}
render() {
const { foo } = this.props;
console.log(this.props);
console.log(foo);
return <div className="container"></div>;
}
}
const mapStateToProps = state => {
return {
cred: state.cred.tabs
};
};
You are trying to destructure property foo from this.props.
But according to your logs, this.props does not seem to contain any foo property.
const { foo } = this.props; is the same as writing const foo = this.props.foo;, which, it seems, is not a value in your props.
If that's not intended and you are instead trying to assign the whole props object to the foo variable, the correct syntax would be const foo = this.props;.
Related
Assume you have a code:
const method = Component => {
const someProps = { foo: 'bar' };
// Add those props to the Component and render it
};
And you use it like this:
method(<MyComponent />)
What should I put in method so I can pass the someProps further?
Class-based syntax
render() {
return <Component {...this.props}>;
}
Functional based syntax
const method = Component => {
const someProps = { foo: 'bar' };
return <Component {...someProps} />;
};
If you wish to find out more on this topic, it's aka HOC, higher order component
Unfortunately, this piece code will not return a component for rendering:
const method = Component => {
const someProps = { foo: 'bar' };
// Add those props to the Component and render it
};
You want your HOC method to be like this:
const method = Component => props => {
const someProps = { foo: 'bar' }
return <Component {...someProps} {...props} />
}
...someProps is the extra props that is 'injected' into Component through HOC. Usually this comes from some API calls inside HOC method.
While ...props is the 'normal' props that is passed down into Component when calling it.
To illustrate what I meant:
import FooComponent from './FooComponent'
// Using the HOC:
const FooComponentWithMethod = method(FooComponent)
// ...rest of code
render() {
return <FooComponent hello={'world'} />
}
// ...rest of code
When you console.log(this.props in FooComponent, you will see both
{
foo: 'bar', // injected by 'method' HOC
hello: 'world' // passed down from parent
}
Seems like the morning brought the answer:
To get this Component with new props, and to keep the old one as well:
const method = (Component) => {
const customProps = { foo: 'bar' };
const elemProps = Component.props;
const mergedProps = { ...customProps, ...elemProps };
const cloned = React.cloneElement(Component, mergedProps);
};
I have the following React class
class Cards extends React.Component {
//state
//axios-> set new state
render(){
const{t} = this.props;
return(
// something
<RenderCards t={t}/>
)};
}
And my RenderCards:
let RenderCards = (props) => {
const {t} = props;
// do something with t
}
The thing is that I also want to pass the state with the props but the following approach is not working :
<RenderCards t={t} st={st}/> //st is this.state
let RenderCars = (props,st) =>{
const {st} = st; // -->is undefined!
}
How should I properly pass the state? Thank you!
All of the things that you pass as JSX attributes will go into the props argument of your stateless component; it doesn't matter where they came from originally. So the signature of RenderCards will always be props => JSX.Element:
let RenderCards = (props) => {
const { t, st } = props;
// do something with t and st
};
Personally I would remove the definition of RenderCards outside of the parent component as well, to avoid unnecessarily redefining it every time the parent is rendered.
Here <RenderCards t={t} st={st}/> the state is passed as a prop. It won't be available as second function parameter (which is now deprecated context):
let RenderCards = (props, st) =>{...}
It is:
let RenderCards = (props) =>{
const {st} = props;
...
}
I have a connected React component pulling into props from Redux state.
It is getting an array of objects called plots, like this:
function mapStateToProps(state) {
return {
plots: state.plots.plots
};
}
I want to map some properties of plots into arrays.
Making this call inside the render method works fine:
render() {
if (this.props.plots) {
console.log(this.props.plots.map(a => a.variety));
}...
}
Defining this method outside the class declaration and calling it inside the render method returns undefined:
const varieties = props => {
if (props.plots) {
props.plots.map(a => a.variety);
}
};
render() {
if (this.props.plots) {
console.log(varieties(this.props);
}
}
Anyone know what I'm missing?
Easy fix.
You are missing a return statement.
const varieties = props => {
if (props.plots) {
return props.plots.map(a => a.variety);
}
};
I have a connected component like this:
const ConnectedComponent = connect((state, props) => {
return {
//fields
};
}, mapDispatchToProps)(Component);
ConnectedComponent.defaultProps = {
// fields
};
But flow says:
ConnectedComponent.defaultProps = {
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ assignment of property `defaultProps`
ConnectedComponent.defaultProps = {
142: };
^ object literal. This type is incompatible with
139: ConnectedComponent.defaultProps = {
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ undefined
You cannot apply defaultProps to a component which doesn't extend React.Component.
Also, in your case your ConnectedComponent is directly connected to store, so there are no props whereas the component Component will receive props from ConnectedComponent, so you should add default props over Component to set default values.
const ConnectedComponent = connect((state, props) => {
return {
//fields
};
}, mapDispatchToProps)(Component);
//This should be added to the Component wherever it is declared
Component.defaultProps = {
// fields
};
Let me know if it helps.
How can I access the constant answer from within this map method's function?
If I pass this to the map method, this.props.answer is defined, but answer is still undefined.
export default class QuestionList extends React.Component {
static propTypes = {
question: ImmutablePropTypes.map,
answer: ImmutablePropTypes.map
};
render() {
const question = this.props.question;
const inputs = question.get('inputs'); // [Input1, Input2, Input3]
const answer = this.props.answer;
const listBody = inputs.map((input, index) => {
console.log(answer); // Uncaught ReferenceError: answer is not defined
});
return (
<div>{listBody}</div>
);
}
}