Custom input field component: Using the correct path?

default discord avatar
Hendrik
2 months ago
5

I am trying to build a custom input component. I tried to use the path to get the correct value from the field. But in my group, all inputs are receiving the same path/value. What i am missing here?



Simple range slider component:


import React from 'react';
import { useField } from 'payload/components/forms';
import { Label } from 'payload/components/forms';
import { Props } from 'payload/components/fields/Number';

const RangeSelect: React.FC<Props> = (props) => {
    const { path, label, required } = props;
    const { value = 0.5, setValue } = useField({ path });
    return (
        <div>
            <Label htmlFor={path} label={label} required={required} />
            {value} // Changes for all inputs
            <input
                type='range'
                min='0'
                max='1'
                step='0.01'
                onChange={e => setValue(e.currentTarget.value)}
            />
        </div>
    );
};

export default RangeSelect;


import { Field } from 'payload/types';
import RangeSelect from '../components/RangeSelect';

const Classification: Field = {
    name: 'classification',
    type: 'group',
    label: 'Classification',
    fields: [
        {
            name: 'option1',
            type: 'ui',
            label: 'Option1',
            admin: {
                components: {
                    Field: RangeSelect
                }
            },
        },
        {
            name: 'option2',
            type: 'ui',
            label: 'Option2',
            admin: {
                components: {
                    Field: RangeSelect
                }
            },
        }
    ]
};

export default Classification;
  • default discord avatar
    Marťafiixek
    last month

    Hi! Sorry to answer late, but better late than never



    Change the type of both fields to number



    UI type is strictly for presentational purposes, therefore it doesn't have any path



    And because both of your fields don't have any path, they act as a one, as path is an empty string for UI fields

  • default discord avatar
    Hendrik
    last month

    @Marťafiixek ahhh! Thank you! 🙂

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.