We Keep Coding

Transfer variables between Vue components

I’ve just started to learn Vue.js and need help.
I have two components, the first one is not a parent for the second.
I need to transfer a variable from one component to another. I’ve tried to use “props” - bad idea
Maybe someone knows how to avoid this “parent” restriction

At first be sure you have read and understood the Vue Docs about Components.
Components Basics
Props
Component v-model
Check also
Vue Tutorial: Step 11. Components
Vue Examples: Simple Component
Here are some answers that could help you with examples:
VUE.JS 3 Changing boolean value of one sibling component from
another
Share data between two child components Vue js

Cannot use hooks inside react class component

Why we cannot use hooks inside react class component ?. React Official documentation only say that hooks don't work inside class, But doesn't show why it won't work.

Class based components are components that extend the React.Component class.
Because of this, they have access to predetermined methods and have a specific lifecycle. For example, the render() method must be defined for class based components. More about the features of the component can be found here.
Historically, we couldn't use lifecycle methods in functional components or access state.
However, hooks were specifically introduced in React to provide this functionality to functional components. Meaning, hooks were only written for functional components when they were added.
Given the fundamental differences in the way React deals with functional components vs class based components and their different lifecycles- I suspect it wasn't feasible to try make hooks components compatible with class based components - especially as they already have access to state and their own lifecycle methods.
Moreover, given that a class component has specific methods, allowing both their existing methods and hooks would naturally lead to rendering chaos.
More can be found here on functional component lifecycle equivalents for class components.
This answer has more information on the fundamental differences and limitations of functional components vs class components - which will help elucidate why it's simple not possible to use their respective functionality in one another

Using Bind to a property from LitElement in React

I have a web component library built using litElement. We are using these components in a React project and are running into an issue using some of the property binding attribute features. React is throwing an error when using the below syntax.
Property binding examples can be seen here using
.attr="" and ?attr=""
https://lit-element.polymer-project.org/guide/templates
Is there a way to use these property bindings inside a React app with a prefixed "." or "?". I am currently aware that we can use JSON.stringify to pass objects as a string to the attribute but would rather pass the objects as a property vs an attribute.
<my-cust-component .model="${this.someObj} ?mybool="false">

Is there a way to use these property bindings inside a React app with a prefixed "." or "?"
Short answer: no.
The first reason is that those syntaxes are lit-specific constructs that you can only use in its rendering context (inside the template of the WebComponent). The other bad news is that React's peculiar view of DOM and rendering make it one of the most WC-incompatible frameworks: you'll have to rely on attributes and refs to communicate with your web components, no property and event binding.
https://custom-elements-everywhere.com/#react

As someone already said you can't use lit-element syntaxes on the react file but you can listen to web components events in react if you use the wc-reactify lib (i'm using it on my project and works just fine), sometimes listening to events dispatched from the web component on your react application can be a solution.
https://lit-element.polymer-project.org/guide/events
https://www.npmjs.com/package/reactify-wc

throws a function in react for tag names, how to debug that function

When I print the tag names it throws a function
console.log(SportsPage);
Do you guys know the reason?
Providing my code below:
console.log(SportsPage);
<SportsPage name={this.props.name} completed={status.state.status}>
<Input
sportsRefrence={sportsRefrence}
/>
</SportsPage>

This code uses JSX, which is a Javascript syntax extension. It's tempting to think of JSX as HTML but this is wrong - it compiles down to Javascript. React uses functions to create elements. When you console.log(SportsPage) you are logging the instance of the SportsPage class that you have defined elsewhere (aka, your React component) and Javascript classes are just functions.
As for debugging, you almost always want to debug the props and state of your components, but not the component instance itself. React provides some great lifecycle methods for this. For instance if you notice your component is rendering more times than expected, you could check out the props and state it is receiving and compare to what it already has in the componentWillUpdate method.

EmberJS - Calling components methods from outside with a couple solutions (call for discussion)

The following is from an issue I posted on EmberJS GitHub, but Stack Overflow is better suited for a discussion than GitHub.
I am building a few complex components at the moment including composite components and I hit a roadblock with the extreme isolation components live in.
There are several cases where I don't need the components to trigger an action on a controller, but where a controller needs to trigger a behaviour change on the component.
Problems is that the components don't know about the controller and the controller is not creating the components either: they are defined in a template.
I kind of solved the problem by subclassing the Ember.Component class to offer a way for messages to get through components.
The new component subclass breaks the on purpose isolation of components that shouldn't know about the outer controller.
The 2 less invasive options I found to make component methods calls from outside are:
Cache component / name of instance pairs in a global array like
App.components, then call a component method with
App.components['name'].method()
Trigger events from outside, register and handle them in the
components. However in that case I am passing an eventSource object
to the component, often a controller like so: {{my-component
eventSource=controller}}
My question is about how could we solve this problem in the most elegant and less invasive way possible for components ?
For achieving composite components, using the components like lego pieces, it seems impossible to me at the moment to see how we can achieve that goal without breaking the components isolation.
Any input, ideas, solutions, discussion is very welcome.
Note: By the way, the first method that breaks the component isolation is inspired by the work done on the ember-bootstrap components: https://github.com/ember-addons/bootstrap-for-ember
The author had to solve the same problem of being capable of triggering methods inside the components from outside.
Another note: Just for the record, another way to access a component is to use Ember.View.views['name'] where name is a view name you gave to your component. However I feel dirty to make such calls, even more from a controller.

In general, I would try to solve this by binding properties to your component, which could then change according to computed properties or observers based on those properties.
For instance, instead of trying to call a method like deactivate on a component, bind a property such as active to a property in the template:
{{my-component active=formEnabled}}
I'm hesitant to recommend passing an eventSource to components as a general solution (like your {{my-component eventSource=controller}} example). I imagine this could work with a class or mixin that just emits specific events and is tightly coupled with your component, but I'm struggling to come up with a use case that justifies this approach.