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.
Related
I have App.js that has a component in it where I pass down props:
let chess = new Chess();
// lots of code...
console.log("chess in App.js", chess);
return <ChildComponent chess={chess} />;
The ChildComponent.js receives this prop as follows:
const ChildComponent = (chess) => {
console.log("chess", chess);
};
When I inspect that in Chrome, I get this:
So, I am somehow losing the object detail when I pass it down as props. Is there something obvious that I am doing wrong?
It needs to be in a {} because it's inside a props object
const ChildComponent = ({ chess }) => {
console.log("chess", chess);
};
OR
const ChildComponent = (props) => {
console.log("chess", props.chess);
};
Your code, log the props object,
try this
const ChildComponent = (props) => {
console.log('chess', props.chess)
}
or
const ChildComponent = ({chess}) => {
console.log('chess', chess)
}
i have a problemn, i need to pass an array to class DragAndDropProvider but not working, i can see value in console log but not is possible update state with value, received error as:
Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.
moment in that i call the class
Index
const documents = UseGetDocuments();
const { state, setItemsArray } = useContext(DragAndDropContext);
setItemsArray(documents);
DragAndDropProvider
export class DragAndDropProvider extends Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
items: [],
moveItem: this.moveItem,
setItems: this.setItems
};
}
an_independent_function(documents: any) {
console.log(documents);
this.setState({ items: documents })
}
render() {
return (
<DragAndDropContext.Provider
value={
{
state: this.state,
setItemsArray: (documents: any) => {
this.an_independent_function(documents);
},
}
}>
{this.props.children}
</DragAndDropContext.Provider>
);
}
When using Class components you need to bind 'this' for it to work in your callback function.
constructor(props: any) {
...
this.an_independent_function = this.an_independent_function.bind(this);
}
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;.
I am not sure how to access the props object outside the context of a receiving child, is there any way? Here is a minimal test file (Jest and Enzyme) I setup to experiment with. I get a syntax error where I try to pass this.props.propNumber in:"this is a reserved word"
const React = require("react");
const enzyme = require("enzyme");
const Adapter = require("enzyme-adapter-react-16");
enzyme.configure({ adapter : new Adapter() });
// simple component with an increment method
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = {
testIncrement : 1
};
}
handleIncrement = (incrementSize) => {
this.setState({
testIncrement : this.state.testIncrement += incrementSize
})
};
render() {
return (
<div>
Test
</div>
);
}
}
const wrapper = enzyme.shallow(
<Foo
propNumber={5}
/>
);
test('prop passage into shallow instance', () => {
wrapper.instance().handleIncrement(this.props.propNumber);
expect(wrapper.state('testIncrement')).toEqual(6);
});
You know what the prop is because you are passing it in, why do you need to access it from the class?
const incrementSize = 1;
const propNumber = 5;
const wrapper = enzyme.shallow(
<Foo
propNumber={propNumber}
/>
);
test('prop passage into shallow instance', () => {
wrapper.instance().handleIncrement(incrementSize);
expect(wrapper.state('testIncrement')).toEqual(propNumber + incrementSize);
});
And your handleIncrement function doesn't take an array, so no reason to pass it one.
In your parent component file, export the value, and then in your child component file, import the value
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);
};