React default props for array property in required object

Question

I have an array as non-required property in required object and I want to give a default value for this array.

const { classes, eItem } = props;

eItem: PropTypes.shape({
   eList: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.number.isRequired,
      nameSurname: PropTypes.string.isRequired,
      img: PropTypes.string,
   })),
}).isRequired,

Example.defaultProps = {
   eItem: { 
      eList: [] 
   },
};

I have written defaultProps like that, but I see that eList is undefined in the console.

How can I give a default value for eList as an empty array?

Can you also show the related code?

Chris
– Chris

2019-09-23 08:02:26 +00:00
Commented Sep 23, 2019 at 8:02 — Chris
– Chris, Commented Sep 23, 2019 at 8:02

nima · Accepted Answer · 2021-09-21 08:16:22Z

1

This is a best practice that writes default props for your noun-required items, because of your warranty to your component that required props are passed to them.

So, in your case, remove redundant and unnecessary default props, then pass a default item to your default props like:

Example.defaultProps = {
   eItem: { 
      eList: [
         id: "Some default number",
         nameSurname: "Some default text",
         img: "default path for a placeholder item ",
      ] 
   },
};

edited Sep 21, 2021 at 8:16

answered Sep 23, 2019 at 8:03

nima

8,99312 gold badges40 silver badges55 bronze badges

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

1 Comment

İsmail Kasap Over a year ago

It isn't an empty array like that and I still see that eList is undefined in the console. By the way eList is an array, It's not an object.

Mohammed Al-Reai · Accepted Answer · 2019-09-23 08:39:31Z

0

try this shape

ReactComponent.propTypes={
  eItem:PropTypes.shape({
    eList: PropTypes.arrayOf(PropTypes.shape({

      id:PropTypes.number ,
      nameSurname: PropTypes.string,
      img: PropTypes.string
    }).isRequired

  })}

with adding the defaultProps as this shape

ReactComponent.defaultProps = {
  eItem: { 
  eList: [
{id:10,nameSurname:"ddddfd",img:"mjjkjkjskdj"}
],
}

edited Sep 23, 2019 at 8:39

answered Sep 23, 2019 at 8:27

Mohammed Al-Reai

2,85617 silver badges19 bronze badges

3 Comments

İsmail Kasap Over a year ago

Ok. This way force to give an initial value when I use this component but I don't want to define any eList prop when I use. I want to define a default value in the component if eList is undefined.

İsmail Kasap Over a year ago

But now, eList has a one item and still comes undefined when initializing. I want to an empty array.

Mohammed Al-Reai Over a year ago

if you want empty to remove the isRequired you can add the number of the eList add what you need as[{id:10,nameSurname:"ddddfd",img:"mjjkjkjskdj"} ,{id:11,nameSurname:"mdmdmd",img:"mjjkjkjskdjdf"}]

Collectives™ on Stack Overflow

React default props for array property in required object

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related