CODEWITHSUNDEEP
javascriptreactjs
mantegnous
mantegnous

Reputation: 53

How to write a multi export in react?

I tried to export multiple component but without success.

The code for export is the following:

export default props => {
  const validate = (values, props) => {
    let errors = {};

    if (!values.userName) {
      errors.userName = "required";
    }
    if (!values.userEmail) {
      errors.userEmail = "required";
    }
    if (!values.userPhone) {
      errors.userPhone = "required";
    }
    return errors;
  };

  return (
    <Formik
      initialValues={props.frequency || {}}
      validate={validate}
      render={formikProps => <Recipients {...props} {...formikProps} />}
    />
  );
};

Recipients.propTypes = {
  recipients: PropTypes.arrayOf(
    PropTypes.shape({
      nome: PropTypes.string,
      email: PropTypes.string,
      phone: PropTypes.string,
      notificationType: PropTypes.arrayOf(
        PropTypes.shape({
          email: PropTypes.bool,
          SMS: PropTypes.bool
        })
      )
    })
  ),
  changeRecipients: PropTypes.func
};

const styles = theme => ({
  primaryColor: {
    color: theme.palette.primary.main
  }
});

export default withStyles(styles, { withTheme: true })(Recipients);

How i can do this export? Recipients is my class, withstyles is material ui for theme, and const validate is formik for valite input.

Upvotes: 0

Views: 138

Answers (2)

Prithwee Das
Prithwee Das

Reputation: 5226

There can't be more than one default export. But you can have multiple named exports, like this

export const Recipients = (props) => {
  const validate = (values, props) => {
    let errors = {};

      if (!values.userName) {
        errors.userName = 'required';
      }
      if (!values.userEmail) {
        errors.userEmail = 'required';
      }
      if (!values.userPhone ) {
        errors.userPhone = 'required';
      }
    return errors;
  };

  return(<Formik initialValues={props.frequency || {}}
                 validate={validate}
                 render={(formikProps) => <Recipients {...props} {...formikProps}/>}/>)
};

Recipients.propTypes = {
  recipients: PropTypes.arrayOf(PropTypes.shape({
    nome: PropTypes.string,
    email: PropTypes.string,
    phone: PropTypes.string,
    notificationType: PropTypes.arrayOf(PropTypes.shape({
      email: PropTypes.bool,
      SMS: PropTypes.bool
    }))
  })),
  changeRecipients: PropTypes.func
};

const styles = theme => ({

  primaryColor: {
    color: theme.palette.primary.main
  }
});

export const RecipientsWithStyles = withStyles(styles, {withTheme: true})(Recipients);

Upvotes: 2

CD..
CD..

Reputation: 74096

You can have only one default export, but you can have more named exports.

See the export statement docs:

There are two different types of export, named and default. You can have multiple named exports per module but only one default export. Each type corresponds to one of the above

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Upvotes: 2

Related Questions