Field Array with just string entries instead of object entries #9481

douglasrcjames · 2022-11-30T22:10:58Z

douglasrcjames
Nov 30, 2022

Hi! Love this library so far, but I have a situation in my system where I need the field array to pass an array of just strings instead of an array of objects, such as:

Current setup:

fieldArrayA: [
     { item1: "test1" },
     { item2: "test2" },
]

Desired setup:

fieldArrayA: [
     "test1",
     "test2",
]

What is the best way to achieve this with react-hook-forms?

bluebill1049 · 2022-12-01T00:24:59Z

bluebill1049
Dec 1, 2022
Maintainer

This is a limitation as each input will need a unique id (key) for react to recognise each input group.

However, if you don't need those actions (swap, move), you can build your own.

1 reply

douglasrcjames Dec 1, 2022
Author

Gotcha, but in my case I can just use the value of the string in the array since I am parsing that as unique elsewhere, so the string should work as an ID.

Sounds like you are saying I CAN technically deconstruct the field array to only pass a string, but I am still not sure how you see that being done while still hooking into RHF? or would I need to create my own component entirely to deal with this field array being just strings? Here's a brief snippet of my code below for context that I am using the Controller interface:

import React, { useEffect, useState } from 'react'
import { Controller, useFieldArray} from 'react-hook-form';
import { BiInfoCircle, BiPlus } from 'react-icons/bi';
import { FaTrash } from 'react-icons/fa';
import { useTheme } from 'styled-components';
import { DATA_TYPE, SIZES } from '../../utils/constants';
import { Button, CheckboxInput, CheckboxLabel, SelectInput, TextInput, TrashSpacer } from '../../utils/styles/forms';
import { Column, Row } from '../../utils/styles/misc';
import { Body, Label } from '../../utils/styles/text';
import { FormError, Tooltip } from '../misc/Misc';

export default function CustomArrayInput({itemColumn, updatingItem, setItemForm, users, user, isSubColumn = false}) {
    const theme = useTheme();
    
    const [fetched, setFetched] = useState({ 
        initialValues: false,
    });

    const label = 
        <Label htmlFor={itemColumn.key} size={isSubColumn ? SIZES.SM : SIZES.MD} br>
            {itemColumn.label}:
            {itemColumn.tooltip && <Tooltip text={itemColumn.tooltip}>&nbsp;<BiInfoCircle /></Tooltip>}
            {(itemColumn?.validators?.required ?? false) && <Body margin="0" display={"inline"} color={theme.colors.red}>&nbsp;*</Body>}
        </Label>;

    const fieldArray = useFieldArray({
        control: setItemForm.control,
        name: itemColumn.key,
        rules: itemColumn.validators,
    });

    const error = setItemForm.formState.errors?.[itemColumn.key]?.root;

    useEffect(() => {
        if(!fetched.initialValues){
            if(!updatingItem && itemColumn?.initialValue){
                let tempValues = setItemForm.getValues();
                tempValues[itemColumn.key] = itemColumn.initialValue;
                setItemForm.reset(tempValues);
            }
            setFetched(prevState => ({
                ...prevState,
                initialValues: true
            }));
        }
    }, [itemColumn, setItemForm, fetched.initialValues, updatingItem]);

    return (
        <>
            {label}
            {
                fieldArray.fields.map((field, f) => {
                    let trashSelectError = "";
                    return (
                        <Row key={f} align={"center"}>
                            { 
                                itemColumn.subColumns.map((subColumn, s) => {
                                    const subError = setItemForm.formState?.errors?.[itemColumn.key]?.[f]?.[subColumn.key] ?? "";
                                    trashSelectError = subError;
                                    const subLabel = 
                                        <Label htmlFor={subColumn.key} br size={isSubColumn ? SIZES.XS : SIZES.SM}>
                                            {subColumn.label}:
                                            {subColumn.tooltip && <Tooltip text={subColumn.tooltip}>&nbsp;<BiInfoCircle /></Tooltip>}
                                            {(subColumn?.validators?.required ?? false) && <Body margin="0" display={"inline"} color={theme.colors.red}>&nbsp;*</Body>}
                                        </Label>;
                                        
                                    // Test for data type
                                    if (subColumn.type === DATA_TYPE.TEXT) {
                                        return (
                                            <Column sm={12} md={4} key={s}>
                                                {subLabel}
                                                <Controller
                                                    name={`${itemColumn.key}.${f}.${subColumn.key}`}
                                                    control={setItemForm.control}
                                                    rules={subColumn.validators}
                                                    render={({ field }) => (
                                                        <TextInput
                                                            type="text"
                                                            key={field.id}
                                                            error={subError}
                                                            placeholder={(`${subError}` !== "") ? `${subError.message}` : `Enter a short text value.`}
                                                            {...setItemForm.register(`${itemColumn.key}.${f}.${subColumn.key}`, subColumn.validators)}
                                                        />
                                                    )}
                                                />
                                                <FormError error={subError} /> 
                                            </Column>
                                        )
                                    } else {
                                        return (
                                            <Body>Invalid!</Body>
                                        )
                                    }
                                })
                            }
                                <Column sm={12} md={6} lg={4} xl={3}>
                                    <TrashSpacer error={trashSelectError}/>
                                    <Button 
                                        type="button"
                                        size={SIZES.SM} 
                                        color={theme.colors.red} 
                                        onClick={() => {fieldArray.remove(f)}}
                                    >
                                        <FaTrash />
                                    </Button>
                                </Column>
                        </Row>
                    )
                })
            }  
            <Button 
                size={SIZES.SM} 
                color={theme.colors.green} 
                type="button"
                onClick={() => {fieldArray.append(itemColumn.defaultArrayFieldStruct)}}
            >
                <BiPlus /> Add entry
            </Button>
            <FormError error={error} />
        </>
    )
}

finkpong · 2025-08-27T17:25:39Z

finkpong
Aug 27, 2025

i wish the detail that react-hook-form only supports array of objects but not primitives was written somewhere in the docs... spent almost two days, long convos with AI that eventually led to a hint to find this limitation 🥲

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Hook Form

Field Array with just string entries instead of object entries #9481

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

React Hook Form

Field Array with just string entries instead of object entries #9481

Uh oh!

douglasrcjames Nov 30, 2022

Replies: 2 comments · 1 reply

Uh oh!

Uh oh!

bluebill1049 Dec 1, 2022 Maintainer

Uh oh!

douglasrcjames Dec 1, 2022 Author

Uh oh!

finkpong Aug 27, 2025

douglasrcjames
Nov 30, 2022

Replies: 2 comments 1 reply

bluebill1049
Dec 1, 2022
Maintainer

douglasrcjames Dec 1, 2022
Author

finkpong
Aug 27, 2025