Serene | Serenity Application Template

I made below snippet by copy-paste your code and just update return statement inside convertToPlain function, also I added href attribute to in the htmlString content.

You have a misconception about how React handles state. The reason why normal variables don't seem to work in React is actually an optimization. React only rerenders the elements on your page when absolutely necessary. The way you tell React "hey, my state changed, can you update the page to reflect that" is by using state variables. In your example, React only rerenders the elements that reference the b variable when you update it using setB. However, it does not rerender the elements that represent a when you update it using a++, because it has no way to detect that a was updated.

useState is actually more efficient than local variables, because it rerenders only what is necessary.

You're trying to get the child component's prop inside a watcher watching the data property that the prop is bounded to. Of course, the watcher triggers first, then the data is passed onto the child component and the prop is updated. Its not a good design if you are relying on the order that Vue events and functions are fired, but if you must, you can use vm.$nextTick() function to get values after everything is synced.

You have kind of a mix between vue-router v3/v4.

Update everything to the latest versions and adapt the Router, so it works according to the latest docs should work:

https://codesandbox.io/s/keen-morning-rufbo?file=/src/router.js

You can not mutate state directly. Need to pass a new array in setLines

It should, either curry or not, it's a function instance, as long as you want to keep an old function instance, you can use it.

But don't use it because the prop onClick, because when your component renders, this button has to render regardless of the onClick. So your line can be simply as

Instead of having a boolean ,you could use the name of the car for the loading property & then checking the value of loading property should suffice.I am assuming names are unique,otherwise add an id property & check with it.

Code with side effects must be put into useEffect. The reason for this is not just because code that is written directly as part of the function body could be executed at arbitrary moments - but it could even be the case that the state outside of useEffect might appear inconsistent.

I don't know how an "incremental" id could be created, but by putting all side-effect relevant code into useEffect, you have at least a consistent view of the value returned by useState, and the value returned by useState is definitely unique. Here's an example of this:

Splitting the FormattedMessage component during render isn't possible I think. Also, I had no luck to render it (during render...) to extract the string from the output.

What you could try to do to get a string and then render it like the other titles is to take the id from children.props.id and resolving it to a string (using the values you pass to IntlProvider if those are available at this point.

Edit:

Looking at it again, the proper way to do is to apply the formatting inside FormattedMessage like so: