Question 1918 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress Blocks, React: map is not a function

I’m creating a WordPress Block using React. I want to use useEffect so that I can dynamically pull in some data from a Web API on load. The data is used to fill the options of a Select.

However, I keep getting an error which says: v.map is not a function. The thing is, I’m not using a map at all. So I’m really struggling to find a solution to this.

The code below demonstrates what I’m doing. I have removed the Web API call to make the code clearer. With or without the Web API call, I still get the error.

function Edit(props) {

const [selectOptions, setSelectOptions] = useState('')

useEffect(() => {

    let options = `
        <option value=''>Please select...</option>
        <option value='1'>Item 1</option>
        <option value='2'>Item 2</option>
    `
    setSelectOptions(options)

}, []);

const blockProps = useBlockProps({
    className: "ac-availability-checker-edit-block"
})

....

And this is where I’m using the value:

<FlexBlock className="ac-attribute">
                <SelectControl
                    label="Background colour"
                    value={props.attributes.bgColor}
                    options={selectOptions}
                    onChange={(value) => updateBgColor(value)}
                />
            </FlexBlock>

For completeness, I’m using:

"@wordpress/scripts": "^24.6.0"

Any help with this would be very much appreciated.

Below is the whole error:

react-dom.min.js?ver=17.0.1:9 TypeError: v.map is not a function
at components.min.js?ver=4b876f1ff2e5c93b8fb1:38:244607
at ct (react-dom.min.js?ver=17.0.1:9:43430)
at It (react-dom.min.js?ver=17.0.1:9:48875)
at os (react-dom.min.js?ver=17.0.1:9:113180)
at Ur (react-dom.min.js?ver=17.0.1:9:77643)
at Ir (react-dom.min.js?ver=17.0.1:9:77571)
at Dr (react-dom.min.js?ver=17.0.1:9:77434)
at Pr (react-dom.min.js?ver=17.0.1:9:74429)
at react-dom.min.js?ver=17.0.1:9:30173
at unstable_runWithPriority (react.min.js?ver=17.0.1:9:7431)
Tags:

2

Answers


  1. 0

    which library do you use to create your select component?
    check out its documentation and check for the type of object that you should pass to it.
    in most cases, you shouldn’t pass your options in string format instead you should pass it as an array of objects.
    the error comes from where the library probably gets an array of options and maps through them but when you pass a string element it can’t be mapped.

    Login or Signup to reply.
  2. 0

    This is because you’re passing a string for the options prop. The options prop must be an array like so:

    <SelectControl
...
    options={ [
        { value: '', label: 'Please select', disabled: true },
        { value: '1', label: 'Item 1' },
        { value: '2', label: 'Item 2' },
    ] }
/>

    From the SelectControl docs:

    options

    An array of objects containing the following properties:

    label: (string) The label to be shown to the user.

    value: (string) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.

    disabled: (boolean) Whether or not the option should have the disabled > attribute.

    Type: Array

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search