return (
<>
<div className='table-wrapper'>
<Table
onUserChange={this.onUserChange} columns={headerColumn} data={rows}
rowsPerPage={50}
/>
</div>
{
selectedUser && <GradeReportChart
closeGradeReport={this.clearSelectedUser}
selectedUser={selectedUser}
/>
}
</>
)
GradeReportChart component fetches data and display it in the new window, using react-new-window library, which uses ReactDOM.createPortal API. I want to display datas for each row in the table in new window. But GradeReportChart component opens one window and change the content whenever new row is selected. I don't want that I want every row on the table when clicked to display the data in a new window. A quick fix may be mount GradeReportChart component whenever row is clicked, how can I do that? Or any way to open new windows in every new row click?
Related
All code demonstration and behavior is here:
There is no need to explain much here.
Look at the stackblitz, open the first row (click on the row). You will see the details of that row. Click on the second row, the detail from the first row will be override with those details from the second row.
Example video here ( what is problem ) :
https://vimeo.com/543841393
Example of code:
What do I want? So I want that if I open the first row I see the details of the first row, if I open the second row I see the details of the second row and not override my data with each new opening of the row.
Instead of using singleDetailsDispatch variable, directly return the book object from the method and call that method inside HTML because when you call getSingleDispatch method, singleDetailsDispatch variable always gets replaced.
public getSingleDispatch(book: any) {
return book;
}
fixed stackblitz link heare
The issue exists because singleDetailsDispatch is the common variable and you are updating whenever you click on the table row. Instead of calling a function you can directly pass the book to the child component like below.
<ng-container *ngIf="book.expanded">
<div class="d-flex row my-1">
<app-child [dispatchDetails]="book" [closedDetail]="detail"
class="w-50"></app-child>
</div>
</ng-container>
I am very new to react and just started to build a basic crud application with it. Everything is done besides the update functionality, i got stuck there.I have several bootstrap cards with 2 buttons , delete and update.The data comes from a mysql database and was persisted with hibernate (spring boot on backend).The update button when pressed should pass the id and render a new component(on a different route, guess i need to use Link here) in which a filled form with the respective objects details is presented. Once the user updates the form and clicks submit, he should be redirected to the Cards page. So far i am stuck at the button + Link and rendering the new component phase and for some reason i can't seem to understand how to make it work.This is my code so far
this is my JSX in which i have the Update button which is in the render method of CarList component which has all the cards.
<ReactBootstrap.Card.Body>
<ReactBootstrap.Card.Title>{cars.mark}-{cars.model}</ReactBootstrap.Card.Title>
<ReactBootstrap.Card.Header>Price: {cars.price}</ReactBootstrap.Card.Header>
<br />
<h6>Fabricated: {cars.year}</h6>
<h6>{cars.fuel}</h6>
<ReactBootstrap.Button variant="success" className="cardButtons" id="cardButtonGreen" onClick={() => this.handleClickUpdate(cars.id)}> Update</ReactBootstrap.Button>
<ReactBootstrap.Button variant="danger" className="cardButtons" id="cardButtonRed" onClick={() => this.handleClickDelete(cars.id)}> Delete</ReactBootstrap.Button>
</ReactBootstrap.Card.Body>
</ReactBootstrap.Card>
</div>
}
<br />
</div>
this is my CarList class and the constructor
class CarList extends Component {
constructor(props) {
super(props)
this.state = {
cars: [],
error: "",
deleteError: "",
updateError: "",
updateCarId: null,
buttonWasPressed: false
}
}
here i have the function that is triggered on click.I am sating the state to the id of the object that is in that specific card where the update button is.
handleClickUpdate = (carId) => {
console.log(carId);
this.setState(
{
updateCarId: carId,
buttonWasPressed: true
}
)
}
and lastly i am rendiring the Component MyComp i want to render by passing in the ID.Line is located in component CarList right under where the Card is.
{this.state.buttonWasPressed && <MyComp carId={this.state.updateCarId} />}
What this code gives me so far, is that i am able to set the state as the id, and then use the button to display the component, but it is displayed on the same page, right under the card (where the line of code is also located) instead of displaying it in a new page on a new route.I have tried adding Link,Switch, Route, Router, but i am afraid i am not sure how to use it in this exact context with the button, and it is confusing to me so i was not able to make it work.Can you please help me render "MyComp" on a new page with that id ?
Any help would be greatly appreciated.
what you need is a global store, such as Redux or Mobx. That way you can update the state with relevant data and retrieve them on the new page.
If you need a workaround, you could use history.pushState()
Basically you can push to your location and with it a state.
And on the next page, which is MyComp in this case, you could use history.state to retrieve the pushed data.
I'm trying to show a table of data on click on a number in another component called Sidebar. I have a parent component ShowTable and two child components Sidebar and Table. However, because I have componentDidMount in Table it only shows the table for the first click. On the second click the table doesn't change, since it has already been mounted. Does anyone know how I could solve this, so that on every click the table would reload? So, how could I trigger a function in the child from the parent component or what could I use instead of componentDidMount? I tried using componentDidUpdate, so that every time a new serial is sent by props the component would load again, however, it starts to infinately loop.
Function handleSelect in ShowTable:
handleSelect=(value)=>{
this.setState( {serial: value, showComponent: true} )
console.log(this.state.serial)
}
In render ShowTable:
{this.state.showComponent ?
<Table s={this.state.serial}/>:
null
}
In Sidebar:
{this.props.se.map((number) => (
<li>
<a onClick={()=>this.props.handleSelect(number.ta)}>{number.ta}</a>
</li>
))};
In Table:
componentDidMount() {
const database = db.ref().child("Devices/" + this.props.s);
...
Thanks in advance!
Currently, I'm trying to add dynamic tabs which have child component, Within the child component, there are several ngx-smart-modal models. I'm able to create dynamic tabs with a close button on it. The issue arises when there are more than one tabs.
Issue
Instance 1: I'm on the first dynamically created tab and I try to click on the model present in a custom component, Model pops up in the last tab of the dynamically created tab. (With the last component details and not desired component details)
Instance 2: If it has only a single dynamically created a model then it works perfectly fine.
Code
HTML
<p-tabPanel [header]="doc.docName" leftIcon="ui-icon-web-asset" *ngFor="let doc of docProps; let i = index" [selected]="true" (onClose)="closeDocProps(doc)" [closable]="true">
<app-child-component [docId]="doc.docId" ></app-child-component>
</p-tabPanel>
app-child-component has several models present in it.
app-child-component (HTML)
<ngx-smart-modal #myModal identifier="myModal">
<h1>Title</h1>
<p>Some stuff...</p>
<button (click)="myModal.close()">Close</button>
</ngx-smart-modal>
TS (Parent component)
on document click operation in the parent component
this.docProps.push({
docId: document.id,
docName : document.docTitle
});
this.changeDetectorRef.detectChanges();
this.activeIndexNumber = this.docProps.length; // to open up the last tab clicked.
also, I'm changing the tab index number with the change of the tab.
onTabChange(event) {
this.changeDetectorRef.detectChanges();
this.activeIndexNumber = event.index;
}
Is there something that I'm doing wrong? Suggestions are highly welcomed.
stackblitz:
https://stackblitz.com/edit/angular-uy3kf5
I'm developing a contacts application where all data is stored on client-side temporarily. I've used material-ui table to display the contacts.
When add new contact button on the bottom right is clicked it displays a Dialog with a form in it. When save button is clicked the data is saved in the state. But the problem I'm facing is how to insert a new row within the table with the form data in it. I searched for it but I couldn't find even a single query regarding the same. The add new contact button is in AddContact component and table is in Contacts component but both have same parent component which is in Main. So in a nutshell I'm not able to display the new contact in the table.
Maintain an array in state variable, when you click on submit in Dialog, push that data in state array. Use the array to generate the rows dynamically, like this:
<Table>
<TableHeader>
<TableRow>
/*Define the headers*/
</TableRow>
</TableHeader>
<TableBody>
{this._generateRows()}
</TableBody>
</Table>
Write the _generateRows function like this to generate the rows:
_generateRows(){
return this.state.data.map(el => {
return <TableRow>
<TableRowColumn>{el.a}</TableRowColumn>
<TableRowColumn>{el.b}</TableRowColumn>
<TableRowColumn>{el.c}</TableRowColumn>
</TableRow>
})
}
Reference : Material-UI table.
Note: Replace el.a, el.b, el.c with the original data.
I see you are using react. This means that when you bind a list of items to the
row components in your render function.
{list.map(item => <RowComponent key={item.id}/>)}
Now when you click the button all you have to do is push to this list and your new row is rendered on screen.