I am trying to do generalizing and code splitting with store addModel/removeModel functions at model level, with typescript and easy-peasy.
There is a sandbox example for the problem illustration.
I get the
This expression is not callable.Type 'Computed<CommonModuleModel, string[], StoreModel>' has no call signatures.ts(2349)
error message.
I see this is a common issue with ts, I checked a number of posts about it, but cannot figure out, how to avoid this error in my case.
There is a newmodule.tsx component, which is lazily loaded, and it adds it's own slice to the model level, but cannot call the nextTodos function from the generalized commonModuleModel model.
How can I get this functionality?
Related
I have an object that is used to to keep track of errors in a long form.
If you try to click on the submit button, and there is an error, I want to be able to scroll to that error by name.
I considered useRef, but each of these inputs are in a deep component structure, and it would need quite a lot of useRef's to be able to jump to them (and a significant rewrite of the inputs component library).
So, I figured I would just go with a simple pure javascript way:
function onClick(){
const errorInputName = Object.keys(errors)[0];
document
.getElementsByName(errorInputName)[0]
.scrollIntoView({ behavior: "smooth" });
}
The trouble is with Next.js document isn't always defined since it could run on the server side.
There seem to be plenty of ways to detect when document isn't available, but how can a force this one piece to run on the client side (even if a small delay is required).
I'm writing React with Typescript and, after making a change to my code, I started seeing Objects are not valid as a React child errors.
I had changed a property from a string to an Optional<string>, so the error totally makes sense since my <div>{property}</div> code was no longer correct.
So, this is a type error being caught at runtime.
I'm not doing any casting or any other code "tricks" to try to subvert pre-existing type checking; I'm just rendering a value that React detects at runtime to be an object.
It seems to me that an appropriate linting rule or typescript configuration should have been able to capture that property is no a valid React child.
Here's a very simple example (TSPlayground):
type Props = {
example:{}
};
const Foo = ({example}: Props) => <div>{example}</div>
I would expect an error pointing to the use of example inside the JSX.
I've been doing some googling, but I can't find a rule that seems like it would catch this.
Is there one that anyone knows of?
As others have mentioned there's no such a feature available right now. Furthermore linters are more geared towards styling than capturing compilation errors. I don't think what you're asking is possible because example is a dynamic type and setting it to a string makes it a valid JSX node while setting it to an object makes it invalid. Since JS is a dynamic language we cannot know this ahead of time. Typescript helps in this case, but that's a separate type system from eslint rules and as #jonrsharpe has mentioned in the comments there's an issue on typescript repository to add the feature you're requesting (#35622).
Hi I'm looking for more advice than code really. I made an object that contain a deck of cards with methods that shuffles, pluck, and things of that nature. I stored this object in a component and thought that it would be a good idea import this object into the parent component by returning the entire object and importing to treat it like a function. However, it seems that react components only returns JSX. Is there something that I'm missing or is there another way? I do not know. Please help me
If it is just a plain object and also not tied up to your component, then decouple it from your component and put it in a separate module.
And import the module wherever it is needed. But keep in mind, if the object is just a set of functions which takes input and gives you the output then it is okay. But if your want to store the values and reference the same everywhere then you might need to create some different like redux store or a single object
https://codeburst.io/javascript-global-variables-vs-singletons-d825fcab75f9
I'm using React with Flow. If I forgot to set some requiring props when rendering, Flow gives me error so I can prevent the problem.
However Flow is not actually working on runtime. So if the value that I used were treated as number wasn't number, Flow can't catch this. For example, if the value was coming from somewhere else, like server side and if it was string, but Flow just treated as number so eventually I will get some errors in runtime.
But PropTypes works in runtime, so in the same case I'll get the error message that PropType expected number but actually it was string.
It's also possible to happen when the API were changed and returning data is different. It could undefined or whatever, possibly not actual value I expected.
So I'm using Flow and PropTypes both actually, however I searched on about using both together, but couldn't find any related informations.
Instead, all I found was just "Flow" replaces "PropTypes". I don't think so, I already mentioned about difference between these two. These two works totally different and each of them have so many good benefits to use, so combine them will have nice synergy, I think.
However now I'm using both, I have to define types for props and also define propTypes and defaultProps always, and it makes my code actually pretty long and takes lots of time just make single component.
Should I stop using Flow and PropTypes together? I think Flow is better than PropTypes, there were so much benefits when using static type checker so I want to keep using it. Also there's nice VSCode support for Flow, but not proptypes.
If I use Flow, is PropTypes doesn't needed? Any advice will appreciate it.
Flow allows you provide types for anything.
PropTypes is just for component's props so it cannot help with typing variable or method. It even does not have easy way for tyyping callback props. You will need to describe custom validator.
Also PropTypes works on per-prop basis. You cannot describe independent subsets of props. E.g. "having field NAME is required only if nickname is empty". I agree that this sounds not really helpful with this example. But it still means flow is more flexible.
And btw having typecheck in production is bad idea anyway - it would lead to performance penalty. At the same time most type issues will already be caught. While it still does not save you from issues in logic - so you will need to test that with manual/acceptance/integration tests.
New to ReactJS. Got this on a "join reactJS event questionary" but was unable to compile it. It seems to be missing a React Component class definition for the Item and List.
Is this shorthand style valid?
Is this shorthand style valid?
yes, it is valid code, List and Items are Stateless functional components
In order to run this code you need use babel with babel-preset-react
Yes, they are stateless functions, aka "pure components". They take their props as their only parameter and return the render results. If you do not need to keep track of any state, they are very lightweight both to understand mentally and in terms of the resources needed by React to manage them.
As to why you were unable to compile it, possibly you do not enable the right ES6/ES2015 features in whichever compiler you're using. You are using among other things super calls, object destructuring (in the parameters) and arrow functions. For help with this, provide the specific error message.
It is a valid javascript es6 code, except that multiple dynamic children (here the list of Items) need to have key prop https://facebook.github.io/react/docs/multiple-components.html#dynamic-children