A Form to be used for sending Create Product requests to the remote end

CreateProductForm.js

// src/CreateProductForm.js
import React, { Component } from 'react';
import {Container,Header,Form, Button,Divider,TextArea} from 'semantic-ui-react';
import client from './feathers'

export default class CreateProductForm extends Component {
state = {
    product:{
            name:'',
            description:'',
            price:''
    }
};

onChange = (e, { name,value }) => this.setState((prevState)=>({
                                product:{
                                  ...prevState.product,
                                 [name]:value
                                }
                               }));
onSubmit =()=>{ // I am skipping validation
const{product}=this.state 
client.service('products').create(product)
}

render() {
const { product:{name,description,price} } = this.state;
   return (
   <Container text >
   <Divider section hidden/>
   <Header> Add Product Form</Header>
    <Form onSubmit={this.onSubmit}>
    <Form.Input 
     name='name' 
     value={name} 
     placeholder='Enter Product  Name' 
     onChange={this.onChange}
    />
    <Form.Input 
     name='price' 
     value={price}  
     placeholder='Enter Product Price' 
     onChange={this.onChange}
    /> 

    <TextArea
    autoHeight
     name='description' 
     value={description}  
     placeholder='Enter Product Description' 
     onChange={this.onChange}
    />
    <Divider  hidden/>
   <Button type='submit' fluid primary>Send</Button>   
  </Form>
  </Container>
 );
}

}