Измени эту форму так, чтобы Show Price Details в radio button был на разделён на Yes и No. В случае no это не мапится в таблицу, в случае yes появляется одно select-поле (for sale и for buying) и одно text-поле с ценой. Форма тут. Измени как форму, так и её мап в таблицу. import { useForm, useFieldArray } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { useEffect, useState } from 'react';

// Schema validation
const schema = yup.object({
  name: yup.string().required('Name is required').max(50, 'Max length is 50'),
  category: yup.string().required('Category is required'),
  quantity: yup.number().required('Quantity is required').min(1),
  location: yup.string().optional(),
  supplier: yup.string().optional(),
  supplierLocation: yup.string().optional(),
  price: yup.number().optional(),
  endpoints: yup.array().of(
    yup.object({
      endpoint: yup.string().required('Endpoint is required'),
      status: yup.string().required('Status is required'),
    })
  ),
});

export const ItemForm = ({ defaultValues, onSubmit }) => {
  const { register, handleSubmit, control, formState: { errors }, reset } = useForm({
    defaultValues,
    resolver: yupResolver(schema),
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'endpoints'
  });

  const [showPriceDetails, setShowPriceDetails] = useState(false);

  useEffect(() => {
    reset(defaultValues);
  }, [defaultValues, reset]);

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="form-grid">
      {/* Basic Information */}
      <div className="grid">
        <label>Name:</label>
        <input {...register('name')} />
        {errors.name && <p>{errors.name.message}</p>}

        <label>Category:</label>
        <select {...register('category')}>
          <option value="Electronics">Electronics</option>
          <option value="Furniture">Furniture</option>
          <option value="Clothing">Clothing</option>
          <option value="Food">Food</option>
          <option value="Toys">Toys</option>
          <option value="Books">Books</option>
          <option value="Sports">Sports</option>
        </select>
        {errors.category && <p>{errors.category.message}</p>}

        <label>Quantity:</label>
        <input type="number" {...register('quantity')} />
        {errors.quantity && <p>{errors.quantity.message}</p>}

        <label>Location:</label>
        <input {...register('location')} />
      </div>

      {/* Optional Fields */}
      <div className="grid">
        <label>Supplier (Optional):</label>
        <input {...register('supplier')} />

        <label>Supplier Location (Optional):</label>
        <input {...register('supplierLocation')} />
      </div>

      {/* Radio button controlling additional inputs */}
      <div>
        <label>Show Price Details?</label>
        <input
          type="radio"
          value="yes"
          checked={showPriceDetails}
          onChange={() => setShowPriceDetails(true)}
        /> For sell
        <input
          type="radio"
          value="no"
          checked={!showPriceDetails}
          onChange={() => setShowPriceDetails(false)}
        /> For buy
      </div>

      {showPriceDetails && (
        <div className="grid">
          <label>Price:</label>
          <input type="number" {...register('price')} placeholder="Enter price" />
        </div>
      )}

     
      <div>
        <h3>Endpoints</h3>
        {fields.map((endpoint, index) => (
          <div key={endpoint.id} className="grid">
            <label>Endpoint {index + 1}:</label>
            <input {...register(`endpoints.${index}.endpoint`)} placeholder={`Endpoint ${index + 1}`} />
            {errors.endpoints?.[index]?.endpoint && <p>{errors.endpoints[index].endpoint.message}</p>}

            <label>Status:</label>
            <select {...register(`endpoints.${index}.status`)}>
              <option value="Delivering">Delivering</option>
              <option value="Delivered">Delivered</option>
              <option value="Pending">Pending</option>
              <option value="Delayed">Delayed</option>
              <option value="Canceled">Canceled</option>
            </select>
            {errors.endpoints?.[index]?.status && <p>{errors.endpoints[index].status.message}</p>}

            <button type="button" onClick={() => remove(index)}>Remove Endpoint</button>
          </div>
        ))}
        <button type="button" onClick={() => append({ endpoint: '', status: '' })}>
          Add Endpoint
        </button>
      </div>

      {/* Submit */}
      <button type="submit">Save</button>
    </form>
  );
};
import { useForm, useFieldArray } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { useEffect, useState } from 'react';

// Schema validation
const schema = yup.object({
  name: yup.string().required('Name is required').max(50, 'Max length is 50'),
  category: yup.string().required('Category is required'),
  quantity: yup.number().required('Quantity is required').min(1),
  location: yup.string().optional(),
  supplier: yup.string().optional(),
  supplierLocation: yup.string().optional(),
  price: yup.number().optional(),
  endpoints: yup.array().of(
    yup.object({
      endpoint: yup.string().required('Endpoint is required'),
      status: yup.string().required('Status is required'),
    })
  ),
});

export const ItemForm = ({ defaultValues, onSubmit }) => {
  const { register, handleSubmit, control, formState: { errors }, reset } = useForm({
    defaultValues,
    resolver: yupResolver(schema),
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'endpoints'
  });

  const [showPriceDetails, setShowPriceDetails] = useState(false);

  useEffect(() => {
    reset(defaultValues);
  }, [defaultValues, reset]);

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="form-grid">
      {/* Basic Information */}
      <div className="grid">
        <label>Name:</label>
        <input {...register('name')} />
        {errors.name && <p>{errors.name.message}</p>}

        <label>Category:</label>
        <select {...register('category')}>
          <option value="Electronics">Electronics</option>
          <option value="Furniture">Furniture</option>
          <option value="Clothing">Clothing</option>
          <option value="Food">Food</option>
          <option value="Toys">Toys</option>
          <option value="Books">Books</option>
          <option value="Sports">Sports</option>
        </select>
        {errors.category && <p>{errors.category.message}</p>}

        <label>Quantity:</label>
        <input type="number" {...register('quantity')} />
        {errors.quantity && <p>{errors.quantity.message}</p>}

        <label>Location:</label>
        <input {...register('location')} />
      </div>

      {/* Optional Fields */}
      <div className="grid">
        <label>Supplier (Optional):</label>
        <input {...register('supplier')} />

        <label>Supplier Location (Optional):</label>
        <input {...register('supplierLocation')} />
      </div>

      {/* Radio button controlling additional inputs */}
      <div>
        <label>Show Price Details?</label>
        <input
          type="radio"
          value="yes"
          checked={showPriceDetails}
          onChange={() => setShowPriceDetails(true)}
        /> For sell
        <input
          type="radio"
          value="no"
          checked={!showPriceDetails}
          onChange={() => setShowPriceDetails(false)}
        /> For buy
      </div>

      {showPriceDetails && (
        <div className="grid">
          <label>Price:</label>
          <input type="number" {...register('price')} placeholder="Enter price" />
        </div>
      )}

     
      <div>
        <h3>Endpoints</h3>
        {fields.map((endpoint, index) => (
          <div key={endpoint.id} className="grid">
            <label>Endpoint {index + 1}:</label>
            <input {...register(`endpoints.${index}.endpoint`)} placeholder={`Endpoint ${index + 1}`} />
            {errors.endpoints?.[index]?.endpoint && <p>{errors.endpoints[index].endpoint.message}</p>}

            <label>Status:</label>
            <select {...register(`endpoints.${index}.status`)}>
              <option value="Delivering">Delivering</option>
              <option value="Delivered">Delivered</option>
              <option value="Pending">Pending</option>
              <option value="Delayed">Delayed</option>
              <option value="Canceled">Canceled</option>
            </select>
            {errors.endpoints?.[index]?.status && <p>{errors.endpoints[index].status.message}</p>}

            <button type="button" onClick={() => remove(index)}>Remove Endpoint</button>
          </div>
        ))}
        <button type="button" onClick={() => append({ endpoint: '', status: '' })}>
          Add Endpoint
        </button>
      </div>

      {/* Submit */}
      <button type="submit">Save</button>
    </form>
  );
};
import { useForm, useFieldArray } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { useEffect, useState } from 'react';

// Schema validation
const schema = yup.object({
  name: yup.string().required('Name is required').max(50, 'Max length is 50'),
  category: yup.string().required('Category is required'),
  quantity: yup.number().required('Quantity is required').min(1),
  location: yup.string().optional(),
  supplier: yup.string().optional(),
  supplierLocation: yup.string().optional(),
  price: yup.number().optional(),
  endpoints: yup.array().of(
    yup.object({
      endpoint: yup.string().required('Endpoint is required'),
      status: yup.string().required('Status is required'),
    })
  ),
});

export const ItemForm = ({ defaultValues, onSubmit }) => {
  const { register, handleSubmit, control, formState: { errors }, reset } = useForm({
    defaultValues,
    resolver: yupResolver(schema),
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'endpoints'
  });

  const [showPriceDetails, setShowPriceDetails] = useState(false);

  useEffect(() => {
    reset(defaultValues);
  }, [defaultValues, reset]);

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="form-grid">
      {/* Basic Information */}
      <div className="grid">
        <label>Name:</label>
        <input {...register('name')} />
        {errors.name && <p>{errors.name.message}</p>}

        <label>Category:</label>
        <select {...register('category')}>
          <option value="Electronics">Electronics</option>
          <option value="Furniture">Furniture</option>
          <option value="Clothing">Clothing</option>
          <option value="Food">Food</option>
          <option value="Toys">Toys</option>
          <option value="Books">Books</option>
          <option value="Sports">Sports</option>
        </select>
        {errors.category && <p>{errors.category.message}</p>}

        <label>Quantity:</label>
        <input type="number" {...register('quantity')} />
        {errors.quantity && <p>{errors.quantity.message}</p>}

        <label>Location:</label>
        <input {...register('location')} />
      </div>

      {/* Optional Fields */}
      <div className="grid">
        <label>Supplier (Optional):</label>
        <input {...register('supplier')} />

        <label>Supplier Location (Optional):</label>
        <input {...register('supplierLocation')} />
      </div>

      {/* Radio button controlling additional inputs */}
      <div>
        <label>Show Price Details?</label>
        <input
          type="radio"
          value="yes"
          checked={showPriceDetails}
          onChange={() => setShowPriceDetails(true)}
        /> For sell
        <input
          type="radio"
          value="no"
          checked={!showPriceDetails}
          onChange={() => setShowPriceDetails(false)}
        /> For buy
      </div>

      {showPriceDetails && (
        <div className="grid">
          <label>Price:</label>
          <input type="number" {...register('price')} placeholder="Enter price" />
        </div>
      )}

     
      <div>
        <h3>Endpoints</h3>
        {fields.map((endpoint, index) => (
          <div key={endpoint.id} className="grid">
            <label>Endpoint {index + 1}:</label>
            <input {...register(`endpoints.${index}.endpoint`)} placeholder={`Endpoint ${index + 1}`} />
            {errors.endpoints?.[index]?.endpoint && <p>{errors.endpoints[index].endpoint.message}</p>}

            <label>Status:</label>
            <select {...register(`endpoints.${index}.status`)}>
              <option value="Delivering">Delivering</option>
              <option value="Delivered">Delivered</option>
              <option value="Pending">Pending</option>
              <option value="Delayed">Delayed</option>
              <option value="Canceled">Canceled</option>
            </select>
            {errors.endpoints?.[index]?.status && <p>{errors.endpoints[index].status.message}</p>}

            <button type="button" onClick={() => remove(index)}>Remove Endpoint</button>
          </div>
        ))}
        <button type="button" onClick={() => append({ endpoint: '', status: '' })}>
          Add Endpoint
        </button>
      </div>

      {/* Submit */}
      <button type="submit">Save</button>
    </form>
  );
};
Эти данные должны мапится тут:   import { Link } from 'react-router-dom';

export const ItemTable = ({ items = [] }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Category</th>
          <th>Quantity</th>
          <th>Location</th>
          <th>Supplier</th>
          <th>Supplier Location</th>
          <th>Endpoints</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {items.length > 0 ? (
          items.map(item => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.category}</td>
              <td>{item.quantity}</td>
              <td>{item.location}</td>
              <td>{item.supplier}</td>
              <td>{item.supplierLocation}</td>
              <td>
  {item.endpoints && item.endpoints.length > 0 ? (
    <ul>
      {item.endpoints.map((endpoint, index) => (
        <li key={index}>{`${endpoint.endpoint} - ${endpoint.status}`}</li>
      ))}
    </ul>
  ) : (
    <p>No endpoints available</p>
  )}
</td>
              <td>
                <Link to={`/edit/${item.id}`}>Edit</Link>
              </td>
            </tr>
          ))
        ) : (
          <tr>
            <td colSpan="8">No items available</td>
          </tr>
        )}
      </tbody>
    </table>
  );
};