I have a React component which calls a function, and i need to pass the injected mobx store and the components props into this function
const Component = inject("store")(observer(({store, props}) => {
return (
<div>
{_someRenderFunction(store, props)}
</div>
);
}));
It's used in the function like this
function _someRenderFunction(store, props) {
let data = store.data;
const { cookies } = props;
...
}
But i get the error Cannot read property 'cookies' of undefined
How can i pass both the store and component props to the _someRenderFunction?
The problem is this line:
({store, props}) => {};
Your component receives only props so the basic definition would be:
(props) => {}
Inject gives you your injected store inside the given props. So what you receive is:
const props = { store: STORE_INSTANCE }
With the object destructing you can extract properties from props. So this would also work:
({ store }) => {}
Here you are extracting the property store from your props. but in your example you are also extracting the property props from props. So in your case props should look like:
const props = { store: STORE_INSTANCE, props: PROPS_OBJECT }
This is not what you want. So object destructing is not what you want in this case. The following code should work:
const Component = inject("store")(observer((props) => {
return (
<div>
{_someRenderFunction(props)}
</div>
);
}));
function _someRenderFunction(props) {
const { cookies, store } = props;
let data = store.data;
...
}
Related
I am passing props to a functional component, but I keep getting an error:
const renderItem = ({ item }) => (
<CommentCellClass
key={item.key}
commentLikes={item.commentLikes}
.... more props
I try and access them in the CommentCellClass component:
const CommentCellClass = ({ props, navigation }) => {
const { key, commentLikes } = props;
But I get the following error:
TypeError: undefined is not an object (evaluating 'props.key')]
What am I doing wrong? The props are not null (I checked before I passed them to commentCellClass)
Sorry for the confusing name (CommentCellClass is a functional component). We are in the process of converting the class components to functional components in our app.
Where does navigation come from? I would expect your code to look like this:
const CommentCellClass = (props) => {
const { key, commentLikes } = props;
...
}
or
const CommentCellClass = ({ key, commentLikes }) => { ... }
I'm trying to implement my own custom way of passing props down to a component.
What I am trying to achieve is something similar to the connect()(Component) method, but with my own little twist.
Say I have a custom component, such as,
// presentationalComponent.js
const PresentationalComponent = ({
name,
loading,
}) => {
return (
<div>
This component is: {name}. The current state is: {loading}
</div>
)
}
and an Error component, such as,
// error.js
const Error = ({errors}) => {
return (
errors.forEach(error => {
<div>{error}</div>
})
)
}
I would want to wrap every component with a morph method, which would grab the requested state and also return a parent component.
So if I was to do,
const PresentationalComponent = ({ . . .
. . .
}
export default morph('layout', ['loading'])(PresentationalComponent)
I would want the morph method to return something like,
const getState = (reducer, values) =>
// lodash
_.pick(
useSelector((state) => state[reducer]),
values,
)
const ParentContainer = ({Component, requestedState: {reducer, fields}}) => {
const errors = useSelector(({ errors }) => errors)
const state = getState(reducer, fields)
if (errors.length) return <Error errors={errors} />
return <Component state={state} />
}
But I'm not sure how to go about this, because hooks like useSelector can only be used in functional components. I'm not sure how connect from Redux makes it work.
Ideally, if I was to do,
const Home = ({ state }) => {
<PresentationalComponent name='My presentational component!' />;
};
I would want to see This component is: My presentational component!. The current state is: false.
How can I achieve this with exporting my components such as morph('reducer', ['state'])(Component)?
I've tried something like,
const morph = (reducer, state) => (Component) => {
console.log('reducer', reducer);
console.log('state', state);
return Component;
};
export default morph;
But that didn't work.
In react, if I have a component that looks something along the lines of this:
const SomeComponent = (props) => {
return stuff
}
and I pass in props like this:
<SomeComponent foo={"x"}/>
How can I get the props object name of foo from the props within the component?
For example, so that I can use it in a function like:
const useObjectName = (xyz) => {
if (xyz){
//do something
}
}
const SomeComponent = (props) => {
const theObjectName = ???
useObjectName(theObjectName)
return stuff
}
You should be able to do that using Object.keys(props) which will return ["foo"].
I am trying to compare some props, prev props and new props. I created a hook:
export const RelatedArticles: FC<RelatedArticlesProps> = props => {
const { content, currentArticle, fetchRelatedContent } = props;
const usePrevious = <T extends unknown>(value: T): T | undefined => {
const ref = React.useRef<T>();
React.useEffect(() => {
ref.current = value;
});
return ref.current;
};
React.useEffect(() => {
if (currentArticle) {
const prevContent = usePrevious(content);
}
fetchRelatedContent!(paramSet || {}, RELATED_ARTICLE_LIMIT);
}, [currentArticle.drupal_id]);
return(...)
};
And I am getting this error:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
What am I doing wrong?
You need to 'hoist' your custom hook declaration outside of the component.
Then invoke it inside.
export const RelatedArticles: FC<RelatedArticlesProps> = props => {
const { content, currentArticle, fetchRelatedContent } = props;
const prevContent = usePrevious(content);
Exactly as it says, you can't use hook calls anywhere else but your function component. Your hook call
React.useEffect(() => {
ref.current = value;
});
is being called from an anonymous function which is not, in fact, a component.
You can either extract the functionality out of the anonymous function or use a class component. As stated on the link you sent us, it looks like you need to define the function out of your function component.
A component using Redux example from React Final Form was created in index.js.
<FormStateFromRedux valueName="valueString" form="counter" />
It is using redux to track values, using prop-types it should receive object name to return exact object value:
const FormStateFromRedux = ({ state, valueName }) => (
<p>{state.values.valueName}</p>
)
export default connect((state, ownProps) => ({
state: getFormState(state, ownProps.form)
}))(FormStateFromRedux)
FormStateFromRedux.propTypes = {
valueName: PropTypes.objectOf(PropTypes.string)
};
It is possible to return value when object path is set manually, here I want to make reusable component to return values using PropTypes but don't know what kind of type to choose. Is it possible to pass value as string? May someone know what should be correct approach in this case?
UPDATE
It is possible to get string value inside object using []
const FormStateFromRedux = ({ state, valueName }) => (
<p>{state.values[valueName]}</p>
)
You should avoid passing whole form state to component. Component should have only necessary props.
const FormStateFromRedux = ({ valueName }) => ( <p>{valueName}</p> );
export default connect((state, props) => {
const formState = getFormState(state, props.form);
const { value : { valueName } } = formState;
return { valueName };
})(FormStateFromRedux);
FormStateFromRedux.propTypes = {
valueName: PropTypes.string
};