ActionController::ParameterMissing (param is missing or the value is empty: asset) - ruby-on-rails

Question

I am pretty new to programing so bare with me and I appreciate the help!
I have been stuck on this for a while but when I try to add a record from a form my rails server gives me ActionController::ParameterMissing (param is missing or the value is empty: asset).
Here is my controller for the assets-
class Api::AssetsController < ApplicationController
before_action :set_area
before_action :set_asset, only: [:show, :update, :destroy]
def index
render json: #area.assets
end
def show
render json: #asset
end
def create
#asset = #area.assets.new(asset_params)
if #asset.save
render json: #asset
else
render json: {errors: #asset.errors }, status: :unprocessable_entity
end
end
def update
if #asset.update(asset_params)
render json:#asset
else
render json: {errors: #asset.errors }, status: :unprocessable_entity
end
end
def destroy
#asset.destroy
render json: {message: "Asset Deleted"}
end
private
def set_area
#area = Area.find(params[:area_id])
end
def set_asset
#asset = #area.assets.find(params[:id])
end
def asset_params
params.require(:asset).permit(:name, :description, :barcode, :status, :img )
end
end
Here is the form-
import { useState } from 'react'
import {Form, Button} from 'react-bootstrap'
import {AssetConsumer} from '../../providers/AssetProvider'
const AssetForm = ({ setAdd, addAsset, areaId,}) => {
const [asset, setAsset] = useState ({ name: '', description: '', barcode: '', status: '', img: ''})
// const {areaId} = useParams
const handleSubmit = (e) => {
e.preventDefault()
addAsset(areaId, asset)
setAdd(false)
setAsset({ name: '', description: '', barcode: '', status: '', img: ''})
}
return (
<>
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3" >
<Form.Label>Asset Image</Form.Label>
<Form.Control
name='img'
value={asset.img}
onChange={(e) => setAsset({...asset, img: e.targetvalue})}
/>
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>Name</Form.Label>
<Form.Control
name='name'
value={asset.name}
onChange={(e) => setAsset({...asset, name: e.targetvalue})}
required
/>
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>Barcode</Form.Label>
<Form.Control
name='barcode'
value={asset.barcode}
onChange={(e) => setAsset({...asset, barcode: e.targetvalue})}
/>
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>Description</Form.Label>
<Form.Control
name='description'
value={asset.description}
onChange={(e) => setAsset({...asset, description: e.targetvalue})}
as="textarea"
rows={3}
/>
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>Status</Form.Label>
<Form.Control
name='status'
value={asset.status}
onChange={(e) => setAsset({...asset, status: e.targetvalue})}
/>
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</>
)
}
const ConnectedAssetForm = (props) => (
<AssetConsumer>
{ value => <AssetForm {...value} {...props} />}
</AssetConsumer>
)
export default ConnectedAssetForm;
Here is the Model-
class Asset < ApplicationRecord
belongs_to :area
validates :name, :description, :barcode,:img, presence: true
end

Answer 1

set the name attribute like this name='asset[name]'
<Form.Control
name='asset[name]'
value={asset.name}
onChange={(e) => setAsset({...asset, name: e.targetvalue})}
required
/>