react.js error handling inside functional component

Question

I have a component which receives a list of items through props.

It looks like this:

const component = (props) => {
  return (
      <ul>
        {props.list.map((item) => (
          <ListItem key={item.Id} title={item.title} imgSrc={item.img.url} />
        ))}
      </ul>
  );
};

edit: and the child looks like this:

const ListItem = (props) => {
  return (
    <li key={props.key}>
      <h4>{props.title}</h4>
      <div>
        <img src={props.imgSrc} alt='thumbnail'
        />
      </div>
    </li>
  );
};

The list comes from an API and there are cases in which the values I am assigning will be undefined or not available (imgSrc for example). This breaks the entire rendering of the app.

How can I handle errors in a way that will skip the problematic item and continue with the mapping? It usually means this is a deleted item so I wish to skip it all together.

I usually wrap the code with a try-catch or if statement but I am not allowed to do it here.

lukasl-dev · Accepted Answer · 2022-07-02 17:40:46Z

4

There are many options to solve that. For example, you could use the filter method before your .map call.

const component = (props) => {
  return (
      <ul>
        {props.list.filter((item) => item.img.url !== undefined).map((item) => (
          <ListItem key={item.Id} title={item.title} imgSrc={item.img.url} />
        ))}
      </ul>
  );
};

Another possible option could be Error Boundaries. I don't think that they are what you need, but it could be interesting for you anyways.

answered Jul 2, 2022 at 17:40

lukasl-dev

1,1178 silver badges16 bronze badges

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

Comments

DecPK · Accepted Answer · 2022-07-02 17:44:15Z

0

You can conditional rendering.

Array.isArray(props.list) &&
    props.list.map((item) => (
        <ListItem key={item.Id} title={item.title} imgSrc={item.img.url} />
    ));

You can only map over the array if it is an array as:

const component = (props) => {
  return (
      <ul>
        {Array.isArray(props.list) && props.list.map((item) => (
          <ListItem key={item.Id} title={item.title} imgSrc={item.img.url} />
        ))}
      </ul>
  );
};

answered Jul 2, 2022 at 17:44

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Collectives™ on Stack Overflow

react.js error handling inside functional component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related