ActionController::ParameterMissing (param is missing or the value is empty: asset)

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
/>