I have two components. From componentA i am getting value of roles
fields and using this values i need to create another record for componentB of users
.
The structure of componentA is like this:
[
{
"id": "507f1f77bcf86cd799439011",
"title": "admin",
"status": "active"
},
...
]
The structure of componentB is like this in which i am getting roles data and when i create another record then at that time the value of roles should be inserted like this format.
[
{
"id": "507f1f77bcf86cd799439017",
"email": "admin@admin.com",
"roles": {
"id": "507f1f77bcf86cd799439011",
"title": "admin",
"status": "active"
}
},
...
]
=> User insert component to insert records.
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import RolesField from "./Editor/Roles/Field";
class UserInsertRow extends React.Component {
constructor(props) {
super(props);
this.roles = [];
this.getRoles();
}
customRoleField = (
column,
attr,
editorClass,
ignoreEditable,
defaultValue
) => (
<RolesField
roles={this.roles}
ref={attr.ref}
{...this.props}
editorClass={editorClass}
ignoreEditable={ignoreEditable}
/>
);
render() {
return (
<BootstrapTable
ref="table"
insertRow={true}
deleteRow={true}
pagination={true}
data={this.props.data}
>
<TableHeaderColumn
dataField="role"
customInsertEditor={{ getElement: this.customRoleField }}
customEditor={{
getElement: this.roleEditor,
customEditorParameters: { roles: this.roles }
}}
>
Role
</TableHeaderColumn>
</BootstrapTable>
);
}
}
=> RolesField component
import { rolesContext } from "../../Context";
class RolesField extends React.Component {
constructor(props) {
super(props);
}
getFieldValue = () => rolesContext._currentValue.selectedRoles;
render() {
console.log(this.props.roles);
return (
<div className="form-group">
<select
className="form-control editor edit-select"
onChange={this.selectRole}
>
{this.props.roles.map(name => (
<option ref={name.id} key={name.id} value={JSON.stringify(role)}>
{name.title}
</option>
))}
</select>
</div>
);
}
selectRole(e) {
var options = e.target.options;
var value = [];
for (var i = 0, l = options.length; i < l; i++) {
if (options[i].selected) {
value.push(options[i].value);
}
}
rolesContext._currentValue.selectedRoles = [];
value.map(value => rolesContext._currentValue.selectedRoles.push(value));
}
export default RolesField;
Context API which i am using to store data.
import React from 'react';
export const roles = {selectedRoles: []};
export const rolesContext = React.createContext(roles);
email: "qqq@qqq.com"
id: "507f1f77bcf86cd799439123"
role: []
How can i manage the <select>
tag for roles
field so that the new inserted record from selected drop down values should be like this:
{
"id": "507f1f77bcf86cd799439017",
"email": "qqqq@qqqq.com",
"roles": {
"id": "507f1f77bcf86cd799439123",
"title": "admin",
"status": "active"
}
},
P.S Please bare with this bit lengthy code.