CODEWITHSUNDEEP
javascriptreactjses6-modules
Hongli Bu
Hongli Bu

Reputation: 561

what does props in export default do?

Hi I am now learning React, and I saw this piece of code

import React from "react";
import {Component} from "react";

import {BackstageTheme} from '@backstage/theme'


const useStyles = makeStyles<BackstageTheme>(() =>
    createStyles({
        someStyle: {
            position: 'relative',
        }
    }),
);

class MyComponent extends Component<any, any> {

    constructor(props) {
        super(props);
    }


    componentWillReceiveProps(props) {
        this.fetchData(props.filters);
    }

    public componentDidMount() {

        this.fetchData(null);
    }

    public fetchData(filters) {
        // fetch data thru API
    }


    public render() {
       
        const classes = this.props.classes;
        return (
            //layout..


        );
    }
}

export default (props) => {
    const classes = useStyles();
    return (
        <MyComponent classes={classes} filters={props.filters}/>
    )
}

I am confused, at the bottom, export default,,

why pass a props, and why have filters={props.filters} ?

can I remove filters={props.filters} ?

can I just have export default MyComponent ?

If this still works with export default MyComponent , make any difference to pass a props in???

Upvotes: 1

Views: 5184

Answers (2)

Inspiraller
Inspiraller

Reputation: 3806

Admittedly not having a name of function is confusing.

export default (props) => {
    const classes = useStyles();
    return (
        <MyComponent classes={classes} filters={props.filters}/>
    )
}

It's just a short cut. When this method is imported it can be named anything Like

import MyComponentWrapper from './Filename'

It would be more understandable as

const MyComponentWrapper (props) => {
    const classes = useStyles();
    return (
        <MyComponent classes={classes} filters={props.filters}/>
    )
}
export default MyComponentWrapper

But importing it can be named anything, like

import SomeOtherName from './MyFile'

Hence the reason for the shortcut.

However, in vscode and other editors, autosuggestion works better if these components are named.

Upvotes: 3

Yves Kipondo
Yves Kipondo

Reputation: 5603

The function which is exported at the bottom of your code is simply another Function Component and every React Funciton Component must receive as parameter props which is an object containing all attribute pass to the component.

Here is an example related to props consider you have a HelloWord component define like this

function (props) {
    return <p>Hello World</>
}

When you use this component in JSX like this

<HelloWorld name="John Doe"/>

The props argument pass to the function define above will be equal to {"name": "John Doe", ...} You can learn more about Component and Props Here

Considering code which you have provide is in a file name MyComponent.js when you import this file without destructuring the export data from the file you get is the exported component. Learn more about ES6 Module Default Export 

import MyComponent from './MyComponent';

This line will return exactly the functional component exported as default which is

export default (props) => {
    const classes = useStyles();
    return (
        <MyComponent classes={classes} filters={props.filters}/>
    )
}

Related to props.filters You can remove if but the MyComponent which you have define in your code expect to have a props name filters as you can see here

componentWillReceiveProps(props) {
    this.fetchData(props.filters);
}

The Filter property is use to fetch some data in the componentWillReceiveProps Life cycle method.

You can just export default MyComponent but you will have to pass classes and filters props as they are use in the code of MyComponent and It will be exactly like here

return (
    <MyComponent classes={classes} filters={props.filters}/>
)

Upvotes: 1

Related Questions