Mapping array in React gives .map is not a function

Question

I am having troubles trying to output my errors in react. the data is coming from an external API, and is formatted like so;

{
    "message": "The given data was invalid.",
    "errors": {
        "name": [
            "The name field is required."
        ],
        "address": [
            "The address field is required."
        ],
        "postcode": [
            "The postcode field is required."
        ]
    }
}

My page which returns the API data and the error component looks something like this;

const ShowData = () => {
    const [errorData, setErrorData] = useState([]);

    const onSubmit = handleSubmit(async ({ name, address, postcode }) => {
        if (errorData) setErrorData([]);

        try {
            // Call API and process here
        } catch (error) {
            setErrorData(error.data);
        }
    });

    return (
        <div>
            {errorData && !Object.keys(errorData).length == 0 &&
                <ErrorComponent errorData={errorData} />
            }
        </div>
    )
}

export default ShowData;


class ErrorComponent extends Component {
    render() {
        const errorData = this.props.errorData;

        return (
            <div>{errorData.message}</div>
            <ul>
                {errorData.errors.map(error => {
                    <li>{error}</li>
                })}
            </ul>
        )
    }
}

export default ErrorComponent;

The error i am receiving is;

errorData.errors.map is not a function

The following is what i am trying to achieve;

<div>The given data was invalid.</div>
<ul>
    <li>The name field is required.</li>
    <li>The address field is required.</li>
    <li>The postcode field is required.</li>
</ul>

errorData.errors is an object, not an array

p1uton
– p1uton

2021-03-25 00:28:34 +00:00
Commented Mar 25, 2021 at 0:28 — p1uton
– p1uton, Commented Mar 25, 2021 at 0:28

codemonkey · Accepted Answer · 2021-03-25 00:41:08Z

2

2 problems.

You are trying to map through an object. You should instated do:

   <ul>
         {Object.values(errorData.errors).map((e, i) =>
               <li key={i}>{e[0]}</li>
         )}
   </ul>

Your map function is missing the return statement, which you can include implicitly by dropping those curly braces as shown above.

edited Mar 25, 2021 at 0:41

answered Mar 25, 2021 at 0:33

codemonkey

7,9655 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AndrewL · Accepted Answer · 2021-03-25 00:29:41Z

1

You're trying to run .map() on an object. .map() is only usable on iterables.

You might try creating an array from the object using Object.keys, Object.values, Object.entries, or another method that creates an array from an object.

answered Mar 25, 2021 at 0:29

AndrewL

1121 silver badge10 bronze badges

Comments

hgb123 · Accepted Answer · 2021-03-25 00:44:32Z

First, you cannot use map on objects, because map itself is a method of Array. As you can see in the doc, it is Array.prototype.map. So here you could transform the errors to array before mapping. Here I use Object.entries because I also want to display the field that caused error.

There are others problems rather than just iterating the errorData:

you returned 2 adjacent elements, div and ul. you must wrap it into one element only. You could use div to wrap, but I prefer using React.Fragment
on mapping, you don't return anything to render, so in your example, it will return a list of undefined, which would display nothing. Solution here is to use explicit return, or shorthand with () => (<yourelement />)

class ErrorComponent extends React.Component {
  render() {
    const errorData = this.props.errorData;

    return (
      <React.Fragment>
        <div>{errorData.message}</div>
        <ul>
          {Object.entries(errorData.errors).map(
            ([errorField, errorMessages]) => (
              <li>
                {errorField}: {errorMessages[0]}
              </li>
            )
          )}
        </ul>
      </React.Fragment>
    );
  }
}

Live demo:

Collectives™ on Stack Overflow

Mapping array in React gives .map is not a function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related