React Redux Form select dropdown not binding data from api - reactjs

Question

On click of edit from sending data from one component to other in first component i have a table displaying list of values and edit button on click of edit button it navigates to component where it has a redux form list of form fields which contains input text and select dropdown input text is binding but not select field state getting value not able to bind.'
This state in my component and dropdown
this.state = {
toWidget:false,
typeOfChart: '',
widgetName: '',
loader: false,
dropdownData: [
{ name:"Choose any Chart", value:"choose" },
{ name:"Bar Chart", value:"bar" },
{ name:"Pie Chart", value:"pie" },
{ name:"Column Chart", value:"column" }
],
}
getting data from other component & initializing here:
componentDidMount() {
if (this.props.match.params.id) {
this.widgetApiService.getWidgets().then(data => {
const getEditObj = data.filter(widget => (widget.id == this.props.match.params.id))
if (getEditObj) {
getEditObj.map(data => (
this.props.initialize({
widgetName: data.name,
typeOfChart: data.basicsettings.chart.type
})
))
this.setState({typeOfChart: getEditObj[0].basicsettings.chart.type});
this.setState({defaultVal: getEditObj[0].basicsettings.chart.type});
}
})
}
}
renderSelect = ({ input,select, placeholder, type, meta, defaultValue }) => {
return (
<div>
<Form.Control as="select" {...select} {...input} type={type} placeholder={placeholder} >
{
this.state.dropdownData.map((item,index) => (
<option value={item.value} key={index}>{item.name}</option>
))
}
</Form.Control>
{this.renderError(meta)}
</div>
)
}
for input field:
widgetName = event => {
this.setState({
widgetName: event.target.value
})
}
for dropdown:
typeOfChart = event => {
this.setState({
typeOfChart: event.target.value
})
}
Form submit function & api calls:
onSubmit = () => {
this.setState({
loader: true
})
let chartType = new ChartType({ type: this.state.typeOfChart });
let chartTitle = new ChartTitle({ text: this.state.chartTitle });
let chartSeries = new ChartSeries({ name: this.state.seriesName });
let data = new ChartOptions({ chart: chartType, title: chartTitle, series: [chartSeries] });
let widgetdata = new WidgetOptions({ name: this.state.widgetName, basicsettings: data });
widgetdata.basicsettings = JSON.stringify(widgetdata.basicsettings);
if (this.props.match.params.id) {
widgetdata.id = this.props.match.params.id;
this.widgetApiService.UpdateWidgetApiService(widgetdata).then(data => {
toast.success("Successfully updated");
this.setState({ loader: false })
}).catch(error => {
toast.error("Somethng went wrong. Try Again");
return error;
})
}
else {
this.widgetApiService.ManageWidgetApiService(widgetdata).then(data => {
toast.success("successfully completed ");
this.setState({ toWidget:true, loader: false })
}).catch(error => {
toast.error("Somethng went wrong. Try Again");
return error;
})
}
}
this is how my redux form looks
<Form onSubmit={this.props.handleSubmit(this.onSubmit)}>
<Form.Group controlId="formWidgetName">
<Form.Label>Widget Name:</Form.Label>
<Field name="widgetName" component={this.renderField} type="text" value={this.state.widgetName} onChange={this.widgetName} placeholder="Widget Name" />
</Form.Group>
<Form.Group controlId="formChartType">
<Form.Label>ChartType</Form.Label>
<Field as="select" name="ChartType" type="select" component={this.renderSelect} value={this.state.typeOfChart} onChange={this.typeOfChart}>
</Field>
</Form.Group>
<Form.Group>
<Button variant="primary" type="submit">
{this.props.match.params.id ? "Update" : "Submit"}
</Button>
</Form.Group>
<div>
{(this.state.loader) ? <Loader /> : null}
</div>
</Form>
export default reduxForm({
form: 'Managed Widget Form',
validate
})(ManageWidget);
this is entire component
const Loader = () => <div className="loader"><ReactBootstrap.Spinner animation="border" /></div>;
class ManageWidget extends Component {
constructor(props) {
super(props)
this.state = {
toWidget:false,
widgetName: '',
seriesName: '',
chartTitle: '',
typeOfChart: '',
// initialName: '',
loader: false,
dropdownData: [
{ name:"Choose any Chart", value:"choose" },
{ name:"Bar Chart", value:"bar" },
{ name:"Pie Chart", value:"pie" },
{ name:"Column Chart", value:"column" }
],
defaultVal: ''
}
this.widgetApiService = new WidgetApiService();
toast.configure();
}
componentDidMount() {
if (this.props.match.params.id) {
this.widgetApiService.getWidgets().then(data => {
const getEditObj = data.filter(widget => (widget.id == this.props.match.params.id))
// console.log(this.state.dropdownData[0].value)
if (getEditObj) {
getEditObj.map(data => (
this.props.initialize({
widgetName: data.name,
seriesName: data.basicsettings.series[0].name,
chartTitle: data.basicsettings.title.text,
typeOfChart: data.basicsettings.chart.type
})
))
this.setState({typeOfChart: getEditObj[0].basicsettings.chart.type});
this.setState({defaultVal: getEditObj[0].basicsettings.chart.type});
console.log("selected value for chart: " + this.state.typeOfChart)
}
})
}
}
mapStateToProps = (state, props) => ({
enableReinitialize: false,
keepDirtyOnReinitialize: true,
initialValues: props.defaultValues
})
renderError({ touched, error }) {
if (touched && error) {
return (
<div>
{error}
</div>
)
}
}
renderField = ({ input, placeholder, type, meta }) => {
return (
<div>
<Form.Control {...input} type={type} placeholder={placeholder} />
{this.renderError(meta)}
</div>
)
}
renderSelect = ({ input,select, placeholder, type, meta, defaultValue }) => {
return (
<div>
<Form.Control as="select" {...select} {...input} type={type} placeholder={placeholder} >
{/* <option>Choose any Chart</option>
<option value="bar">Bar Chart</option>
<option value="pie">Pie Chart</option>
<option value="column">Column Chart</option> */}
{
this.state.dropdownData.map((item,index) => (
<option value={item.value} key={index}>{item.name}</option>
))
}
</Form.Control>
{this.renderError(meta)}
</div>
)
}
widgetName = event => {
this.setState({
widgetName: event.target.value
})
}
seriesName = event => {
this.setState({
seriesName: event.target.value
})
}
chartTitle = event => {
this.setState({
chartTitle: event.target.value
})
}
typeOfChart = event => {
this.setState({
typeOfChart: event.target.value
})
}
onSubmit = () => {
this.setState({
loader: true
})
let chartType = new ChartType({ type: this.state.typeOfChart });
let chartTitle = new ChartTitle({ text: this.state.chartTitle });
let chartSeries = new ChartSeries({ name: this.state.seriesName });
let data = new ChartOptions({ chart: chartType, title: chartTitle, series: [chartSeries] });
let widgetdata = new WidgetOptions({ name: this.state.widgetName, basicsettings: data });
widgetdata.basicsettings = JSON.stringify(widgetdata.basicsettings);
if (this.props.match.params.id) {
widgetdata.id = this.props.match.params.id;
this.widgetApiService.UpdateWidgetApiService(widgetdata).then(data => {
toast.success("Successfully updated");
this.setState({ loader: false })
}).catch(error => {
toast.error("Somethng went wrong. Try Again");
return error;
})
}
else {
this.widgetApiService.ManageWidgetApiService(widgetdata).then(data => {
toast.success("successfully completed ");
this.setState({ toWidget:true, loader: false })
}).catch(error => {
toast.error("Somethng went wrong. Try Again");
return error;
})
}
}
render() {
if(this.state.toWidget){
return <Redirect to="/admin/WidgetList" />
}
return (
<>
<Form onSubmit={this.props.handleSubmit(this.onSubmit)}>
<Form.Group controlId="formWidgetName">
<Form.Label>Widget Name:</Form.Label>
<Field
name="widgetName"
component={this.renderField}
type="text"
value={this.state.widgetName}
onChange={this.widgetName}
placeholder="Widget Name"
/>
</Form.Group>
<Form.Group controlId="formChartType">
<Form.Label>ChartType</Form.Label>
<Field
as="select"
name="ChartType"
type="select"
component={this.renderSelect}
value={this.state.typeOfChart}
defaultValue={this.state.defaultValue}
onChange={this.typeOfChart}>
</Field>
</Form.Group>
<Form.Group controlId="formWidgetName">
<Form.Label>Series Name:</Form.Label>
<Field
name="seriesName"
component={this.renderField}
type="text"
value={this.state.seriesName}
onChange={this.seriesName}
placeholder="Series Name"
/>
</Form.Group>
<Form.Group controlId="formWidgetName">
<Form.Label>Chart Title:</Form.Label>
<Field
name="chartTitle"
component={this.renderField}
type="text"
value={this.state.chartTitle}
onChange={this.chartTitle}
placeholder="Chart Title"
/>
</Form.Group>
<Form.Group>
<Button variant="primary" type="submit">
{this.props.match.params.id ? "Update" : "Submit"}
</Button>
</Form.Group>
<div>
{(this.state.loader) ? <Loader /> : null}
</div>
</Form>
</>
);
}
}
const validate = (values) => {
const errors = {}
if (!values.widgetName) {
errors.widgetName = "Please enter the widget name"
}
if (!values.seriesName) {
errors.seriesName = "Please enter the series name"
}
if (!values.chartTitle) {
errors.chartTitle = "Please enter the chart title"
}
return errors
}
export default reduxForm({
form: 'Managed Widget Form',
validate,
})(ManageWidget);