Prop values in selectors - retrieving via an inline selector doesn't seem to work correctly
See original GitHub issueWe are attempting to use a Prop inside of a Selector.
We’re following this suggestion: https://kea.js.org/docs/guide/advanced#props-in-selectors
However, for whatever reason, we cannot seem to get access to props inside the inline selector as described in the documentation.
Here is a quick snippet I built on https://npm.runkit.com/kea
to illustrate the issue.
require("react/package.json"); // react is a peer dependency.
require ("react-dom");
require("react-redux/package.json"); // react-redux is a peer dependency.
require("redux/package.json"); // redux is a peer dependency.
require("reselect/package.json"); // reselect is a peer dependency.
var kea = require("kea")
const logic = kea.kea({
selectors: ({ props }) => ({
valueFromSelectorsProps: [
() => [],
() => props.foo
],
valueFromInlineSelectorProps: [
() => [
// inlineProps is an empty object here, it should be the props which I passed into the 'build' method
(_, inlineProps) => inlineProps.foo
],
(foo) => foo
],
})
})
logic.build({ foo: 'foo' })
logic.mount();
console.log(logic.values.valueFromSelectorsProps);
// "foo" --- It works!
console.log(logic.values.valueFromInlineSelectorProps);
// undefined --- It doesn't seem to work!
As you can see, I attempt to use the 2 different methods of accessing props as described in the docs. Both should work, right? For whatever reason though, I cannot get inline selector method to work.
Anyone have a second to take a look at this? Could just be user error.
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Attribute selectors - CSS: Cascading Style Sheets | MDN
The CSS attribute selector matches elements based on the presence or value of a given attribute.
Read more >not(:empty) CSS selector is not working? - Stack Overflow
Being a void element, an <input> element is considered empty by the HTML definition of "empty", since the content model of all void...
Read more >How to Troubleshoot CSS Not Working - WPForms
There are a few common issues that can cause CSS not to appear correctly on a site. In this tutorial, we'll walk through...
Read more >[attribute] | CSS-Tricks
We can use any of an element's attributes as selectors. ... Here, the selector matches a value that is either the only value...
Read more >CSS - Cascading Style Sheets, designing for the Web - W3C
Also, you can pretty much trust that most browsers will display the content of an h1 element using a big font size... at...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Fixed in 2.3.5 😃
Turns out
.mount()
was basically calling.build().mount()
and the defaultprops
in.build(props = {}).mount()
were overriding the ones stored on the built logic. Since no other test broke, I just released the fix in a patch version.The
const instance = logic.build(props)
approach makes sense if you’re using keyed logic. Then each instance will have a different set of props attached to it.And thanks for all the warm feedback! 😊
Hey, that’s indeed the right approach. If you call
logic.mount()
, it’ll basically runlogic.build({}).mount()
behind the scenes, thus resetting the props you gave withlogic.build({ foo: 'foo' })
just one line earlier.