I have a text box on the page, the user would enter text into the text box and click a button. I want the text to be added to ag-grid as a new row. Below is the code I have, I don't understand how it should be added to state sellerIds
class testPage extends Component {
constructor(props) {
super(props);
this.state = {
sellerIds: []
}
}
addSellerGridIdInput(e) {
e.preventDefault();
const rowData = [
{
sellerId: '54545454545'
}
]
this.setState({sellerIds: [...this.state.sellerIds, rowData]})
console.log(this.state.sellerIds);
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
}
render() {
const columnDefs = [
{
header: 'Seller ID',
field: 'sellerId',
}
];
return (
<div className="container-fluid cf">
<div className="card">
<div className="card-header">
SRP Import
</div>
<div className="card-body">
<div className="form-group row">
<div className="col-3">
<input name="sellerId" className="form-control" type="text" maxlength="8"
id="sellerId"/>
<button className="btn btn-primary btn-secondary" type="submit"
onClick={(e) => this.addSellerGridIdInput(e)} style={{marginTop: 5}}>Add Seller ID
</button>
<div style={{height: '250px'}} className='ag-theme-alpine'>
<AgGridReact
id="programexcGrid"
columnDefs={columnDefs}
rowData={this.state.sellerIds}
onGridReady={this.onGridReady.bind(this)}
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
};