...attributes in react-native function component

Question

I have the following function component in a react-native app. In second line of code, there is ...attributes which is confusing. While I understand that it represents spread syntax in newer JavaScript version, but I cannot find what does attributes mean. If it said ..props then that is understandable. I tried to google but couldn't find any suitable answer.

Question

What does attrributes denote in second line of code snippet below?

  const Loader = (props) => {
  const { loading, loaderColor, loaderText, ...attributes } = props;

  return (
    <Modal
      transparent={true}
      animationType={'none'}
      visible={loading}
      onRequestClose={() => {
        console.log('close modal');
      }}>
      <View style={styles.modalBackground}>
        <View style={styles.activityIndicatorWrapper}>
          <ActivityIndicator
            animating={loading}
            color={loaderColor? loaderColor : '#0000ff'}
            size={Platform.OS === 'ios' ? 'large' : 75}
          />
          {loaderText ? (
            <View style={{ flexDirection: 'row' }}>
              <Text style={styles.modalText}>{loaderText}</Text>
            </View>
          ) : (
            ''
          )}
        </View>
      </View>
    </Modal>
  );
};

Where is the code from?? – yesIamFaded Sep 22 '20 at 07:21 — yesIamFaded, Sep 22 '20 at 07:21
This is a component that I see in a react native app. – Sunil Sep 22 '20 at 07:39 — Sunil, Sep 22 '20 at 07:39

score 1 · Accepted Answer · answered Sep 22 '20 at 07:35

1

attributes is the name of the newly created constant containing the rest properties from props.

const {
  a,
  b,
  ...objectContainingEveryOtherPropertyExceptAB
} = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
console.log(objectContainingEveryOtherPropertyExceptAB);

So if you use your component like this <Loader loading foo="bar" /> then attributes will be equal to { foo: 'bar' }

answered Sep 22 '20 at 07:35

Yury Tarabanko

44,270
9
84
98

Great answer. Thanks. So `..attributes` would mean that attributes constant would contain everything except following properties: loading, loaderColor, loaderText. Cool construct. Coming back to the component in ocd snippet, I think `...attributes` is not really needed in above code since its not being used in the Loader component. It would have been sufficient to use object destructuring to set loading, loaderColor, loaderText using this line of code: `{loading, loaderColor, loaderText} = props;` – Sunil Sep 22 '20 at 07:47
One question related to your example of `` where the loading property is not set. Is it automatically being set to undefined or null? – Sunil Sep 22 '20 at 07:50

...attributes in react-native function component

1 Answers1