I'm new to React - I'm creating dynamically a few components that takes a title from an input box by clicking on a button. Each subcomponent created can add a row with text inside the component itself. When I try to add a row to a subcomponent it adds to all others too. I cannot understand how to "isolate" the click for each component. Also when I create a new component it copies overs the previous text.
I'm attaching a sandbox here https://nv82kc.csb.app/
Any idea/suggestion?
Thanks!
Related
I have a child component selectServiceChargeComponent inside a parent component (Saving Invoice Component). Child component is simply a form inside a table. If clicked on add row button new row would be formed. Problem is when I click on add row button, the following error arises:
After looking some SO answers, I found ref would help to trigger a function in child component. So, in parent's component I used a ref inside child component and create a add row button underneath it and tried to trigger a click function addRow().
So that I could use this.$refs.serviceChargeComponent.addRow();.
But another problem came in return.
It looks like addRow() function is outside of methods:{}. Methods in vue should be defined inside methods: {}.
I have a component that renders a reactstrap table and within the render I have map function of a state of clients that gets rendered as table rows.
Within each table row there is a component(separate button component that just open up a modal) that gets rendered within the map function.I want to use the onMouseEnter to determine which row I am currently at(with cursor) and when I click on the button component.Now the modal component just opens up the same for all rows.
The idea is that lets say I load 4 clients and map through them,when I do I render a table row for each client within the map.Along with this map function I also add a button component(separate component) as a td tag for each tr that gets rendered.
I want to use onMouseEnter to know which one I am at in the row.
So when mouse is hovering over second row(position 1 in clients array) I want to be able to know at which row I am at.
Then I want to pass this row index(which I need to get somehow?) to the button component(same component just rendered 4 times for each client row) and when button component renders I can get this index from props.
.....Please know I am a big react noob just trying to figure this out
I am using a list/array to render the table depending from data I get from a API so it can be 6 clients or a 100 you know?
Hahah just asking for advise
Thanks
React has an abstraction to vanilla DOM events called Synthetic events. Lucky for you, the Synthetic event you're looking for has the same name, "onMouseEnter".
<span onMouseEnter={(event)=>console.log('ENTERED!')} />
You can get read up on most of them here
https://reactjs.org/docs/events.html
I'm trying to create a table that looks like a spreadsheet with editable inputs inside each td. I'm using Angular's ComponentFactoryResolver as explained here, to add a row to the table when user clicks the add button.
Once the row is added, I use EventEmitter to emit all the data of that row as the last column value is changed.
I've tried to re implement the same functionality on this StackBlitz.
I'm having the following issues:
I'm unable to emit data from the newly added components. (Check Console)
Once I add a new row, the first row (not dynamic) also stops giving me the emitted data.
I'm not sure how to delete a row if user don't needs it as I don't have the reference to it.
This is what I am suggesting. You can create a list of row objects in the parent (table) component and use *ngFor to loop it over.
<app-row
*ngFor="let row of rowList"
[row]="row"
(entryUpdate)="onEntryUpdated($event)">
</app-row>
Please have a look at this
I have two different components in my React application.One component to display pop up, and other for text search field.
There is no relation(parent-child)between them.
My question is when user clicks pop up message(component), be focused text field in another component.
How can I handle this situation without using document.getElementById?
only using a react a specific way like reactDOM with ref.
Is it possible to handle like that?
Thanks
Find the common parent component, and write a function which updates a state with ref of the element to be focused. Pass down that function as props to the second component.
And use <input ref={r => this.props.func(r)
Now on click of first component you can access this parent state.
I have a grid component and a dynamically determined second component.
There is a splitter component that always contains a grid in the top part.
A secondary component will be displayed in the bottom part of the splitter.
The type of secondary component will depend on the selected row type in the grid.
Select row 1 and the secondary component might be line chart
Select row 2 and the secondary component might be another grid...
As the user changes the selected row, the component and the data displayed will need updating.
Any ideas on how to set this up?
You can dynamically load second component with [ngSwitch] directive.
If you want to dynamically load them, build a code similar to this
<div [ngSwitch]="variable">
<app-first *ngSwitchCase="1"></app-first>
<app-second *ngSwitchCase="2"></app-second>
</div>
It's up to you how you will determine which component should be loaded. You can for example change value of a variable with jQuery of plain JavaScript to render specific component. Component will be automatically updated if you change a row.
If you want to automatically update content so the data from 1st component matches 2nd, you have to use some cross component communication provided by Angular4.
Good explanation how to do this here: https://www.youtube.com/watch?v=I317BhehZKM