import React from "react";
import { reduxForm, Field } from "redux-form";
import BoardFields from "./BoardFields";
import Category from "./Category";
class BoardForm extends React.Component {
render() {
return (
<div>
<form onSubmit={this.props.handleSubmit(values => console.log(values))}>
<Field
label="Name"
type="text"
name="boardName"
component={BoardFields}
/>
<Field
label="Description"
type="text"
name="description"
component={BoardFields}
/>
<Field
label="Category"
type="text"
name="categories"
component={Category}
/>
<Field
label="privacy"
name="privacySettings"
component="input"
type="checkbox"
/>
<button className="red btn-flat right white-text" type="button">
Cancel
</button>
<button className="teal btn-flat right white-text" type="submit">
Create
</button>
</form>
</div>
);
}
}
export default reduxForm({
form: "newBoardForm"
})(BoardForm);
`
This is my code in Category.js
import React from "react";
const categories = [
"Animal and pets",
"Art",
"Architecture",
"Cars",
"Fashion",
"Lifestyle"
];
const Category = ({ input, label, children }) => {
return (
<div>
<div className="field">
<label className="label">{label}</label>
</div>
<div>
<select {...input}>
<option value="">What kind of board is it?</option>
{categories.map(val => (
<option value={val} key={val}>
{val}
</option>
))}
</select>
</div>
</div>
);
};
export default Category;
`
Please help where I am going wrong here